Component

Side Nav

Lightweight vertical navigation that renders labeled sections of links, with active-state highlighting and aria-current. A simpler alternative to the full Sidebar when you don't need collapse or a mobile drawer.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/side-nav

Usage

Use SideNav for a static, always-visible list of grouped links inside an existing layout. Reach for Sidebar instead when you need icon-collapse, a mobile Sheet, or provider-driven state.

Playground

Preview

Configure

Active item

Code

const sections = [
  {
    id: "guides",
    label: "Guides",
    items: [
      { label: "Getting Started", href: "/docs/getting-started" },
    ],
  },
  {
    id: "components",
    label: "Components",
    items: [
      { label: "Button",  href: "/components/button",  active: true },
      { label: "Card",    href: "/components/card" },
    ],
  },
]

<SideNav sections={sections} />

Do

Group related links under a section label to give users a sense of hierarchy
Mark the current page with the active prop so it gets aria-current="page"
Keep labels short so they don't wrap at the fixed nav width

Don't

Don't use SideNav when you need collapsing or a mobile drawer, use Sidebar
Don't nest sections, keep the structure a single level deep
Don't rely on color alone for the active state, the active link is also bolded