Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

NavigationMenu

NavigationMenu renders grouped site navigation with dropdown panels for categories, sections, and related destinations.

CoreNavigation@gaudi/design-system/core/NavigationMenuView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { NavigationMenu } from '@gaudi/design-system/core/NavigationMenu';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/navigation-menu-blog-recent-posts.json.

Usage

import { NavigationMenu, NavigationMenuDropdown, NavigationMenuLink, NavigationMenuList, NavigationMenuPanel } from '@gaudi/design-system';
<NavigationMenu>  <NavigationMenuList>    <NavigationMenuLink href='' active>Blog</NavigationMenuLink>    <NavigationMenuDropdown label='Categories' width='xl'>      <NavigationMenuPanel columns={2}>        <NavigationMenuLink href='' variant='panel' description='Knowledge graphs, semantic web, and linked data.'>          Data        </NavigationMenuLink>        <NavigationMenuLink href='' variant='panel' description='Implementation notes and developer tooling.'>          Engineering        </NavigationMenuLink>      </NavigationMenuPanel>    </NavigationMenuDropdown>  </NavigationMenuList></NavigationMenu>

Examples

Blog menu with recent posts

Storybook

Site header menu

Storybook

API

17 props

Accessibility

NavigationMenu renders a nav landmark, real links, native dropdown buttons, aria-expanded triggers, Escape-to-close behavior, outside-click dismissal, and aria-current for active links.

BreadcrumbBreadcrumb renders hierarchical page trails for navigation context.5 examplesFloatingMenuA compact, inverted pill of destinations that floats over the page once the reader scrolls away from the header, with an optional Back to top button. LayoutContainer renders it for the site; pass targetRef and position sticky to use it inside a scroll container.PaginationPagination renders blog-style previous/status/next navigation. Hovering or focusing the center status reveals direct page shortcuts.4 examplesScrollspyTrack the visible section and navigate a long document using anchor links.1 exampleStepperShow progress through a sequence of labelled steps.6 examplesTreeBrowse hierarchical content with expansion, selection, checkboxes and drag feedback.3 examples