Navigation

App header, sidebar and nav items.

Atomus

DashboardProjectsReports

KS

Atomus

HomeProjects12Reports

Settings

NavigationLive · light and dark follow the theme switch

Usage

import { AppHeader, SidebarNavigation, NavItem } from '@stanvision/atomus-react';

<SidebarNavigation header={<Logo />} footer={<NavItem label="Settings" href="/settings" />}>
  <NavItem label="Home" href="/" icon={<HomeIcon />} active />
  <NavItem label="Projects" href="/projects" badge={12} />
</SidebarNavigation>

AppHeader (top bar), SidebarNavigation (280px, or a 72px rail) and NavItem rows.

Provide

• NavItem — label, href, icon, badge, chevron, active (sets aria-current="page"), collapsed (icon only, label as tooltip and accessible name).
• SidebarNavigation — header, children (NavItems), footer, collapsed.
• AppHeader — brand, nav, actions; the nav hides below 768px, so pair it with a menu button.

Don’t

• Don’t mix a sidebar and a header nav with the same links.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.