Side Nav

SideNav lists the modules of the product. Each SideNavModule expands to show its pages, which are SideNavItem links.

import { SideNav, SideNavItem, SideNavModule } from '@beyul/sulmu-ui'

Source · Figma

Examples

• Contacts
• Time Tracking
• Deals
• Admin

  • Overview
  • Users
  • Groups
  • Roles

import {
  ClockIcon,
  MoneyIcon,
  ProfileIcon,
  Setting2BoldIcon,
  SideNav,
  SideNavItem,
  SideNavModule,
  UserTagIcon,
} from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <SideNav aria-label="Modules" onCollapse={() => {}}>
      <SideNavModule label="Contacts" icon={<ProfileIcon />}>
        <SideNavItem href="#contacts">Overview</SideNavItem>
        <SideNavItem href="#contacts-settings">Settings</SideNavItem>
      </SideNavModule>
      <SideNavModule label="Time Tracking" icon={<ClockIcon />}>
        <SideNavItem href="#time">Overview</SideNavItem>
      </SideNavModule>
      <SideNavModule label="Deals" icon={<MoneyIcon />}>
        <SideNavItem href="#deals">Pipeline</SideNavItem>
      </SideNavModule>
      <SideNavModule label="Admin" icon={<UserTagIcon />} activeIcon={<Setting2BoldIcon />} active>
        <SideNavItem href="#overview">Overview</SideNavItem>
        <SideNavItem href="#users" active>
          Users
        </SideNavItem>
        <SideNavItem href="#groups">Groups</SideNavItem>
        <SideNavItem href="#roles">Roles</SideNavItem>
      </SideNavModule>
    </SideNav>
  )
}

Props

SideNav

Prop	Type	Default	Description
onCollapse	(() => void)	-	Shows the collapse button and is called when it is pressed. Hiding the nav is up to the app.
collapseLabel	string	Hide navigation	Accessible name of the collapse button. Default: "Hide navigation".

SideNavModule

Prop	Type	Default	Description
label*	ReactNode	-
icon	ReactNode	-	Outline icon, e.g. <UserTagIcon />.
activeIcon	ReactNode	-	Bold icon shown while the module is active, e.g. <Setting2BoldIcon />.
active	boolean	-	The current page is inside this module. Opens it by default.
children	ReactNode	-	The module's pages: SideNavItem elements.
open	boolean	-	The controlled open state of the collapsible.
defaultOpen	boolean	-	The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
onOpenChange	((details: OpenChangeDetails) => void)	-	The callback invoked when the open state changes.

SideNavItem

Prop	Type	Default	Description
active	boolean	-	This is the current page.
href	string	-
asChild	boolean	-	Use the provided child element as the default rendered element, combining their props and behavior.

Accessibility and usage

• SideNav is a <nav>: give it an aria-label (“Modules”).
• active on a module marks the module that contains the current page and opens it by default. activeIcon is the bold icon shown while it is active.
• active on an item sets aria-current="page".
• SideNavItem is an <a>. Use asChild to render the router’s link component.
• onCollapse shows the collapse button and is called when it is pressed. Hiding the nav is up to the app.