Clinia UI

Navigation Menu

Top-level site navigation with panels of links.

shadcn docs →

When to use

  • The top-level navigation of a site, with panels of links under some items.
  • A marketing or docs site with a few sections, each with a handful of pages.

When not to use

  • App navigation with many sections: use Sidebar.
  • A list of actions: use Dropdown Menu, or Menubar for a desktop-style app.
  • A trail back up the hierarchy: use Breadcrumb.

Install

npx shadcn@latest add @clinia/navigation-menu

Clinia rules

  • Set active on the current section's link. It sets aria-current="page".
  • Top-level labels are short nouns: Product, Docs, Pricing. Keep the bar to about five items.
  • A trigger only opens its panel. Put the section's own page as the first link inside the panel.
  • Panel links pair a title with one line of text-muted-foreground that says what's there.

Do and don't

Do keep top-level labels to short nouns.
Don't put sentences in the bar.

Accessibility

Built in

  • The current page's link is tinted bg-accent/15. Set active on it, which also sets aria-current.
  • Triggers expose aria-expanded. Escape closes the open panel and returns focus to its trigger.

Your responsibility

  • Set active on the link to the current page, so it's marked for screen readers too.
  • Give every panel link text. An image or an icon alone names nothing.

How to test

  1. Press Tab to reach a trigger, then Enter: its panel opens and the trigger reads as expanded.
  2. Press Tab again: focus moves into the panel's links.
  3. Press Escape: the panel closes and focus returns to the trigger.
  4. With a screen reader, the active link is announced as the current page.

API

Every prop comes from Base UI Navigation Menu.

Related