NavRail

A narrow bar of icon links to switch sections.

NavRail.tsx

import {
  NavRail,
  NavRailContent,
  NavRailFooter,
  NavRailItem
} from 'alinea/components'
import {
  IcBaselineAccountCircle,
  IcOutlineSettings,
  LucideFile,
  LucideImage
} from 'alinea/dashboard/icons'

export function NavRailExample() {
  return (
    <div style={{display: 'flex', height: 240}}>
      <NavRail aria-label="Sections">
        <NavRailContent>
          <NavRailItem icon={LucideFile} label="Pages" active />
          <NavRailItem icon={LucideImage} label="Media" badge={3} />
          <NavRailItem icon={IcOutlineSettings} label="Settings" />
        </NavRailContent>
        <NavRailFooter>
          <NavRailItem icon={IcBaselineAccountCircle} label="Maya Janssens" />
        </NavRailFooter>
      </NavRail>
    </div>
  )
}

Props

`<NavRail>`

A narrow vertical bar of icon buttons at the edge of the AppShell, for switching between the main sections of the application. It turns into a horizontal bar on small screens.

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<NavRailHeader>`

The top of the rail, eg. a logo or workspace switcher

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.

`<NavRailContent>`

The navigation items of the rail

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<NavRailItem>`

An icon button in the rail with its label in a tooltip

PropTypeDefaultDescription

icon*IconTypeDefault –

label*stringDefault –Shown in a tooltip and used as the accessible name, with the badge count

activebooleanDefault –Marks the item as the current section

hrefstringDefault –Renders the item as a link

disabledbooleanDefault –

badgeReactNodeDefault –A count or true for a dot, shown on top of the icon

onClick(event: MouseEvent<HTMLElement>) => voidDefault –

Also accepts className and style and data-* attributes.

`<NavRailFooter>`

Pinned to the end of the rail, eg. activity and the user menu

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.