Navigation

The site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg.

LayoutContainer renders it from menuProps.

Installation

pnpm add github:ahmadassaf/design-system

import Navigation from '@gaudi/design-system/blocks/Navigation';

Usage

import { Menu } from '@gaudi/design-system';
<Menu blogLink={blogLink} categories={categories} posts={posts} logo={<img src='/logo.svg' alt='' className='size-10' />} />

Examples

Playground

Blog Route

Custom logo

Phone Sheet

Search Handoff

Search trigger

Apple-style mega menu

Scroll-merging header

API

Accessibility

One Main navigation landmark with real links and aria-current on the current destination. Panels close on Escape (focus returns to the trigger) or an outside click. The phone sheet is a named modal dialog that takes focus, closes on Escape or Close and returns focus to the menu button; search closes it before the launcher opens.

Notes

• Site links come from SiteConfig navigation.links; showInPath and hideInPath filter them per route.
• The phone sheet and brand mark are private parts; replace the mark through logo.
• The Apple-style mega menu example composes public navigation, dialog, and accordion parts with a full-width hover panel, a mobile disclosure menu, and reduced-motion support.
• The Scroll-merging header example moves the section tabs alongside the brand as its contained workspace scrolls; reduced motion keeps a compact header.

Related