Quartz Headless

All components

Primitives

NavigationMenu

Site navigation links with one keyboard-accessible flyout panel.

Documentation API reference

Playground

Change the inputs, watch the outputs and copy the usage code.

Site navigation with one hover- and keyboard-controlled flyout.

Inputs

Orientation

Show delay (ms)

Hide delay (ms)

Disabled

RTL

Template

<nav qzNavigationMenu aria-label="Main navigation"><ul qzNavigationMenuList><li qzNavigationMenuItem="products"><button qzNavigationMenuTrigger>Products</button><ng-template qzNavigationMenuContent>…</ng-template></li></ul></nav>

Example

NavigationMenu

Loading demo…

Install

$ npm install @quartz-headless/core @quartz-headless/primitives

// exports
import { NavigationMenuDirective } from '@quartz-headless/primitives';

Prefer owning the source? Copy it with the CLI.