Sidebar

The navigation at the side of an app: the workspace, the main links, settings and the user. It can collapse to icons.

Usage

Import the component and render it.

import { Sidebar } from 'src/components/Sidebar/Sidebar';
import { HouseLineIcon, EnvelopeIcon, CalendarBlankIcon, FolderIcon, BookmarkIcon, GearSixIcon } from '@phosphor-icons/react';

<Sidebar
  logo="/docs/visualist-logo.png"
  logoAlt="Visualist home"
  workspace="Visualist Media"
  workspaces={[{"label":"Visualist Media"},{"label":"Design Studio"}]}
  items={[{"label":"Dashboard","href":"#","icon":<HouseLineIcon />,"active":true},{"label":"Messages","href":"#","icon":<EnvelopeIcon />,"badge":"9"},{"label":"Calendar","href":"#","icon":<CalendarBlankIcon />},{"label":"Files","icon":<FolderIcon />,"expanded":true,"items":[{"label":"General","href":"#"},{"label":"Team","href":"#"},{"label":"Billing","href":"#"}]},{"label":"Bookmarks","href":"#","icon":<BookmarkIcon />}]}
  footerItems={[{"label":"Settings","href":"#","icon":<GearSixIcon />}]}
  user={{"name":"John Doe","email":"john@visualist.com","src":"/docs/avatar-photo.jpg"}}
/>

Accessibility

Role: navigation landmark with lists of links; Submenus are disclosures; the Workspace Switcher is a menu button.

Key	Action
`Tab`	Moves through the logo, the switcher, the links and the user
`Enter / Space (Submenu)`	Shows or hides its links

The current page has aria-current="page".
Collapsed, each icon-only item is named by its label and shows it in a Tooltip.

State

Set the collapsed prop: Expanded is {false}, Collapsed is {true}.

Expanded

Collapsed

<Sidebar />
<Sidebar collapsed />

Composition

Use the following composition to build a Sidebar:

Sidebar
├── SidebarItem
│   ├── Badge
│   └── Tooltip
├── SidebarSubmenu
├── SidebarSubmenuItem
├── SidebarWorkspaceSwitcher
│   ├── Avatar
│   └── DropdownMenu
├── Separator
├── ListItem
├── Avatar
├── DropdownMenu
└── Tooltip

SidebarItem

A link of the Sidebar: icon, label and an optional count. Icon-only in a collapsed Sidebar. Only used inside Sidebar.

SidebarItem

<SidebarItem label="Dashboard" />

SidebarSubmenu

A Sidebar Item that shows or hides its own links (Sidebar Submenu Items). Only used inside Sidebar.

SidebarSubmenu

<SidebarSubmenu
  label="Files"
  items={[{"label":"General","href":"#"},{"label":"Team","href":"#"},{"label":"Billing","href":"#"}]}
/>

SidebarSubmenuItem

A link inside a Sidebar Submenu, with a guide line. Only used inside Sidebar.

SidebarSubmenuItem

<SidebarSubmenuItem label="General" href="#" />

SidebarWorkspaceSwitcher

The workspace at the top of the Sidebar: a button that opens a menu of workspaces. Only used inside Sidebar.

SidebarWorkspaceSwitcher

<SidebarWorkspaceSwitcher label="Visualist Media" />