Application navigation

Composition

Composition guidance for product-owned chrome. Wave 1 found no reusable package API: the upstream layouts hard-code product identity, routes, actions, account data, and responsive shell policy.

Demo

hero
Component
import { NavItemBase } from "@/components/application/app-navigation/base-components/nav-item"; <NavItemBase type="link" href="/dashboard" icon={BarChartSquare02} badge={"10"} > Dashboard </NavItemBase>

In context

in-context
View in a page

Family

family
SidebarNavigationSimple
SidebarNavigationSlim
SidebarNavigationDualTier
SidebarNavigationSectionDividers
GeneralYour teams
SidebarNavigationSectionsSubheadings
HomeTasks
HeaderNavigationBase
NavItemBase
Projects
NavButton
NavList

Jordan Lee

jordan.lee@example.invalid

NavAccountCard
NavAccountMenu
MobileNavigationHeader

Types

cells

Nine layouts, each the real shell in its own lg viewport.

Sidebars

Simple
Slim, hover or Tab the rail
Dual-tier, hover or Tab a row
Section dividers
Sections subheadings

Headers

Simple
Dual-tier
Tabs
Centered

Sizes

cells

The account card in the sheet’s two columns, smallest first.

Jordan Lee

jordan.lee@example.invalid

Breakpoint Mobile

Jordan Lee

jordan.lee@example.invalid

Breakpoint Desktop

Compositions

cells

Thirteen recipes for the feature-card slot, in the sheet’s order.

The feature-card slot

Used spaceYour team has used 80% of your available space. Need more?
Progress bar
80%
Used spaceYour team has used 80% of your available space. Need more?
Progress circle
New features available!Check out the new dashboard view. Pages now load faster.
A short tour of the new dashboard
Image
Cookie preferencesWe use cookies to analyze traffic, remember preferences, and improve your experience.
Cookie preferences
Refer a friendEarn 50% back for 12 months when someone uses your link.
Referral link
Complete accountStep 3 of 4
  • Complete your profile
  • Verify your phone number
  • Set up 2FA and backups
  • Add payout bank details
Onboarding steps
Upgrade to PRO20% OFF
Unlock 20+ integrations, 40 GB data, and advanced reporting.
Upgrade CTA
Online
Need help with something?Our experts are ready to help.
Support CTA
Attendee 1
Attendee 2
Attendee 3
Attendee 4
Join our workshopLive
Learn how to leverage Claude to supercharge your workflow.
Event CTA
Mathilde Lewis
Mathilde Lewis2 mins ago
I’ve finished adding my notes. Happy for you to review!
Message
Current projects
Current projects
Free trial24 days left
Free trial CTA
Verify this deviceOpen the app and scan the QR code below to verify this device.
QR code

Content

cells

Nav item

long label, truncated
badge and label together
http href, the external glyph
a node badge, unwrapped

Behaviour

cells

Collapsible row

Dashboard
closed
Dashboard
open

The account card

Jordan Lee

jordan.lee@example.invalid

the card; press the chevron
the menu, in flow

Below lg

a sidebar’s drawer, open
a header’s bar, the same below lg

Loading

cells

Account card

Loading account card
type card
Loading account card
type simple

Nav items

Loading nav items
one row, text medium
Loading nav items
four rows, lengths cycled

States

cells

Nav item

link; hover and focus live
link, current
Dashboard
collapsible, current
Dashboard
collapsible open, current
Dashboard
collapsible-child, current

Nav button

Projects
pill
Projects
pill, current
icon-only
icon-only, current