Sidebar · juxt.ui

Sidebar

Navigation for apps: items with icons and counts, grouped under titles that fold away, and a footer pinned to the bottom.

<script setup lang="ts">
import { Bell, ChevronsUpDown, Folder, Home, Inbox, LifeBuoy, Settings } from '@lucide/vue'
</script>

<template>
  <div class="h-[26rem] w-60 overflow-hidden rounded-lg border border-border bg-surface">
    <JSidebar label="Workspace">
      <template #header>
        <button type="button" class="flex w-full items-center gap-2 rounded-sm px-1 py-1 text-left hover:bg-surface-hover">
          <JAvatar name="Acme" shape="square" size="sm" />
          <span class="flex-1 text-sm font-medium text-fg">Acme</span>
          <ChevronsUpDown class="size-3.5 text-fg-muted" />
        </button>
      </template>
      <div class="flex flex-col gap-0.5">
        <JSidebarItem href="#" active><template #leading><Home /></template>Overview</JSidebarItem>
        <JSidebarItem href="#"><template #leading><Inbox /></template>Inbox<template #trailing>12</template></JSidebarItem>
        <JSidebarItem href="#"><template #leading><Bell /></template>Activity</JSidebarItem>
      </div>
      <JSidebarGroup title="Projects">
        <JSidebarItem href="#"><template #leading><Folder /></template>Website</JSidebarItem>
        <JSidebarItem href="#"><template #leading><Folder /></template>Mobile app</JSidebarItem>
        <JSidebarItem href="#" disabled><template #leading><Folder /></template>Archive</JSidebarItem>
      </JSidebarGroup>
      <JSidebarGroup title="Teams">
        <JSidebarItem href="#">Engineering<template #trailing><JBadge size="sm">4</JBadge></template></JSidebarItem>
        <JSidebarItem href="#">Design</JSidebarItem>
      </JSidebarGroup>
      <template #footer>
        <JSidebarItem href="#"><template #leading><LifeBuoy /></template>Help</JSidebarItem>
        <JSidebarItem href="#"><template #leading><Settings /></template>Settings</JSidebarItem>
      </template>
    </JSidebar>
  </div>
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSidebar, JSidebarGroup, JSidebarItem } from '@juxtui/ui'

Usage #

<JSidebar>
  <JSidebarItem :as="NuxtLink" to="/" active>Overview</JSidebarItem>
  <JSidebarGroup title="Projects">
    <JSidebarItem :as="NuxtLink" to="/p/web">Website</JSidebarItem>
  </JSidebarGroup>
</JSidebar>

The sidebar takes the full height of its column. In a container with a fixed height (e.g. h-dvh) the item list scrolls inside it; in a page that only has a minimum height (e.g. min-h-screen) it stretches with the page. Either way the footer stays at the bottom.

On small screens, put the same sidebar inside a JSheet opened by a JBurger. See the app shell block.

Variants & examples #

API #

JSidebar

Prop	Type	Default	Description
label	`string`	`'Sidebar'`	Accessible name of the navigation landmark.

Slots

Slot	Props	Description
header	—	Logo, workspace switcher.
default	—	Items and groups.
footer	—	Pinned to the bottom.

JSidebarGroup

Prop	Type	Default	Description
title	`string`	—	Group heading.
collapsible	`boolean`	`true`	Let the heading fold the group away.
open	`boolean`	`true`	Expanded state, optionally bound with `v-model:open`.

Slots

Slot	Props	Description
default	—	Items.

JSidebarItem

Prop	Type	Default	Description
active	`boolean`	`false`	Current page: highlighted with an accent marker and `aria-current="page"`.
disabled	`boolean`	`false`	Removed from the tab order and marked `aria-disabled`.
as	`string \| Component`	`'a'`	Render as `NuxtLink` or any element.

Slots

Slot	Props	Description
default	—	Label, truncated with an ellipsis if too long.
leading	—	Icon.
trailing	—	Count, badge or shortcut.

Accessibility #

An <aside> with a labelled <nav> inside.
Group headings are buttons with aria-expanded; folded groups are inert, so hidden links can’t be reached.
The active item is announced with aria-current="page"; the accent marker is decoration on top.

Keyboard #

Key	Action
`Tab`	Moves through items. Items in a folded group are skipped.
`Enter`	On a group heading: folds or unfolds the group.