@gridui/site-navigation

Landing family. Public API: SiteNavigation, SiteNavigationLink, SiteNavigationProps.

Import components from @gridui/site-navigation and load @gridui/site-navigation/styles.css after Theme. Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.

See component ownership and release history.

Rich navigation menus

SiteNavigation combines @gridui/responsive-navigation, @gridui/menu, @gridui/drawer, and @gridui/button. Applications supply links, localized labels, preferences, desktop content, and optional mobile content/footer slots.

ResponsiveNavigation owns desktop/mobile switching. Menu owns content-neutral navigation parts. Drawer owns modal focus management, scroll locking, start/end placement, dismissal, and its header/body/footer parts. The independent Popover family owns desktop hover intent. SiteHeader supplies a separate frame shell with caller-owned branding.

Set columns={1} on a MenuGrid passed as mobile content; the composition does not select its private descendants. Load rendered dependency styles before SiteNavigation styles.

className styles the ResponsiveNavigation root. For a header whose links and preferences form one compact group at the far end, use an application utility class that disables the root's default flex growth:

<SiteHeader justify="between" gap={16} padding={{ base: 24, lg: 32 }}>
    <BrandLink href="/">Product</BrandLink>
    <SiteNavigation className="flex-none" {...localizedNavigation} />
</SiteHeader>

Without that class, the navigation keeps its existing flexible width, placing its preferences at the opposite edge of the available navigation region.

Native navigation and drawer dismissal

links accepts native anchor attributes and handlers in addition to href, label, and current. A caller's onClick runs first on both desktop and mobile. Calling preventDefault() keeps the mobile drawer open. Modified clicks, non-primary clicks, downloads, and links targeting another browsing context retain their native behavior and also leave the drawer open.

An ordinary same-context mobile link closes the drawer. If its destination has a fragment and matches the current origin, path, and query, native anchor navigation keeps the destination focus and scroll position rather than returning focus to the menu trigger. Close-button and Escape dismissal continue to restore trigger focus. onMobileCloseAutoFocus exposes the underlying DrawerPanel event when an application needs another focus policy; calling preventDefault() suppresses the normal trigger restoration. It does not cancel navigation or drawer dismissal.

<SiteNavigation
    links={[
        { href: "#features", label: "Features" },
        { href: "/guide/", label: "Guide", target: "_blank", rel: "noreferrer" },
        { href: "/report.csv", label: "Download report", download: true },
    ]}
    {...navigationLabelsAndPreferences}
/>

Caller-owned mobileContent, mobilePreferences, and mobileFooter slots retain their own activation policy. Compose their controls with public Drawer parts when they should dismiss the panel.