Components / navigation

Sidebar Item

A navigation link inside a vertical sidebar.

import { SidebarItem } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { SidebarItem } from '@basiiik/ui';

<SidebarItem>Inbox</SidebarItem>

• Hover and Focused are CSS. Selected is selected (aria-current=page). Disabled is disabled (aria-disabled, focusable). collapsed gives the icon-only layout and keeps the label as the accessible name.
• Compose with: badge.
• Storybook: Navigation/Sidebar Item.

Props

States. Hover and Focused are CSS. Selected is selected (aria-current=page). Disabled is disabled (aria-disabled, focusable). collapsed gives the icon-only layout and keeps the label as the accessible name.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Primary or secondary vertical navigation

Do not use it when

• Horizontal top navigation (use Navbar)

Rules for agents

• Put Sidebar Items inside a <nav aria-label> (typically a list) and give each an href
• children is the plain text label and is always required, even when collapsed
• Set selected on the item for the current destination only
• Use badge for counts or status; it becomes part of the accessible name
• When collapsed, every item needs an icon; the label becomes its tooltip

Avoid

• Using Sidebar Items for actions that are not destinations (use Button)
• Collapsed items without icons
• More than one selected item
• Disabling an item without explaining why
• Deep nesting inside a sidebar; keep to one or two levels

Writing the content

• Labels are short nouns: 'Inbox', 'Projects', 'Settings'
• Use sentence case

Keyboard

• Tab through items
• Enter activates

Accessibility

• aria-current="page" on the selected item
• Collapsed layout needs an accessible name (aria-label or Tooltip text)

Colour tokens it reads

Related

• Navbar
• Tabs
• Tooltip

navigation 10 Figma variants Try it in the live demo