Navigation

NavigationBar

Vertical navigation bar with tooltips, expandable labels, responsive mobile mode, and burger menu when icons overflow.

Basic (icon-only)

Each item has its own active color. Disabled items show tooltip.

Expandable (hover to expand)

Hover over the bar for 300ms to expand and show labels. Top slot is a link, bottom slot opens UserMenu.

Responsive Mode (resize window <768px)

With responsive=true (default), on mobile transforms to horizontal bottom bar.
Use leftSlot and rightSlot for horizontal mode.
If all icons don't fit, a burger button appears on the right; tap to open a menu with all items.
inline=true — same behavior but without position:fixed (for containers/demos).

Responsive with overflow (burger menu)

When there are many items and the bar is narrow, icons are hidden and a burger button appears. Tap it to open a sheet with all pages. Resize the window or use a narrow viewport to see the burger.

Non-Responsive Mode

responsive=false — always vertical, no mobile adaptation. Use for desktop-only layouts.

With UserMenu (top position)

UserMenu as topSlot content with auto-positioned dropdown.

Custom Widths

collapsedWidth=60, expandedWidth=280 — customize bar dimensions.

Usage
import { NavigationBar } from '@pulsesync/uikit'
import type { NavigationBarItem } from '@pulsesync/uikit'

const items: NavigationBarItem[] = [
  { key: 'home', icon: <HomeIcon />, label: 'Home', active: true },
  { key: 'settings', icon: <GearIcon />, label: 'Settings' },
]

// Basic (vertical)
<NavigationBar items={items} tooltipPosition="right" />

// Expandable with clickable slots
<NavigationBar
  items={items}
  expandable
  expandDelay={300}
  topSlot={{
    content: <LogoIcon />,
    expandedLabel: <span>.dev</span>,
    href: '/', // Makes entire slot a link
  }}
  bottomSlot={{
    content: <Avatar src={avatarUrl} />,
    expandedLabel: <span>Username</span>,
    onClick: () => openUserMenu(),
  }}
/>

// Responsive mode with separate mobile slots
// topSlot/bottomSlot — vertical (desktop)
// leftSlot/rightSlot — horizontal (mobile)
<NavigationBar
  items={items}
  responsive={true} // default
  // Desktop
  topSlot={{ content: <LogoIcon />, href: '/' }}
  bottomSlot={{ content: <Avatar /> }}
  // Mobile — you can omit these if you don't want them
  leftSlot={{ content: <LogoIcon />, href: '/' }}
  rightSlot={{ content: <Avatar />, onClick: openProfile }}
/>

// Disable responsive for desktop-only
<NavigationBar items={items} responsive={false} />

// When responsive and items overflow (narrow width), a burger button appears;
// tap to open a menu with all items (leftSlot/rightSlot still visible).