Navigation menu

When to use

• For the top navigation of public, marketing-style pages: the SuperCoach website, the help center, a coach's public profile and packages.
• When a few top-level sections each have a handful of pages that benefit from a short description: Getting started, Features.

coach-admin itself doesn't need it. The app's main navigation is the Sidebar, and in-page views use Tabs.

When not to use

• For coach-admin's main navigation: use the Sidebar.
• For a list of actions on an item (Edit, Duplicate, Archive): use a dropdown menu. Navigation menu items go to pages; they don't act.
• For more than about 5 top-level items, or deep trees: use a sidebar, or a page that lists the sections.
• On mobile: the bar doesn't fit. Use a Sheet with the same links.

Anatomy

Open a trigger to see the rest: the content with links (a title and an optional one-line description each), and the viewport, the popover-colored panel that holds the open content. With the viewport (the default) one panel is shared and resizes as the coach moves between triggers; with viewport={false} each content opens in its own panel under its trigger. An optional indicator (NavigationMenuIndicator) points at the open trigger.

Variants

States

"Pricing" in the first preview is marked as the current page with active.

Usage guidelines

• 3 to 5 top-level items. Each submenu has 2 to 6 links; more than that wants its own page.
• Mark the section of the current page with active, so it is visible and announced.
• Every trigger opens a submenu, and every submenu link goes to a page. Don't put buttons, forms or search inside a submenu.
• Submenus open on hover and on click. Don't rely on hover alone for anything important; touch screens and keyboards don't hover.

Content guidelines

• Top-level labels are one or two words, nouns, sentence case: "Getting started", "Features", "Pricing".
• Link titles name the page; the description says what the coach finds there, in one short sentence: "Packages, invoices and payouts."
• Don't repeat the section in each link: under "Features", write "Programs", not "Programs feature".
• Arabic labels are short nouns too: "البدء"، "المزايا"، "الأسعار".

Accessibility

• Rendered as a nav landmark with a list. Name it with aria-label ("Help center"), because a page often has more than one nav.
• Triggers are buttons with aria-expanded and aria-controls: "Features, collapsed, button".
• Links marked active get aria-current="page": "Pricing, current page, link".
• The submenu is not a menu role: it's a group of ordinary links, so screen readers keep their normal link navigation.
• Opening on hover waits 200ms, so moving the pointer across the bar doesn't flash panels open.

RTL

The bar reads from right to left, and arrow keys follow the reading order (the site provides Radix's DirectionProvider). The shared viewport sits at the start edge. Content slides in from the side the coach moved toward, which flips in RTL: the component has rtl: variants for each data-motion direction. The trigger chevron points down and does not mirror.

Tokens used

Read from components/ui/navigation-menu.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.

• Layerz-(--z-dropdown)
• Layerz-(--z-raised)
• Motionduration-(--duration-base)
• Motionduration-(--duration-slow)
• Opacityopacity-(--opacity-disabled)
• Radiusrounded-md
• Radiusrounded-sm rounded-ss-sm
• Shadowshadow-md
• Typefont-medium
• Typetext-sm

Props

Replaces in coach-admin

Related

Sidebar, Tabs, Dropdown menu, Breadcrumb, Sheet.