Navigation menu

A horizontal menu with dropdowns.

import { BuiNavigationMenu } from 'ng-blatui';

<bui-navigation-menu [items]="items" />

Simple (no dropdowns)

<bui-navigation-menu [items]="items" />
// flat items (no links) render as plain links, no dropdown

Featured

Docs

<!-- an item.featured promo block sits atop its dropdown -->
<bui-navigation-menu [items]="items" />
// items[0] = { label: 'Products', featured: { label, description, href }, links: [...] }

API reference

Inputs

Prop	Type	Default	Description
`items`	`readonly NavMenuItem[]`	`[]`	Top-level menu entries, each optionally opening a dropdown panel.

Types

NavMenuItem

Field	Type	Description
`label`	`string`	Visible text of the top-level menu entry.
`href`?	`string`	Destination URL for a plain (non-dropdown) entry.
`links`?	`NavMenuLink[]`	Sub-links rendered in the dropdown panel; presence makes this a dropdown.
`featured`?	`NavMenuLink`	A highlighted promo link shown at the top of the dropdown panel.

NavMenuLink

Field	Type	Description
`label`	`string`	Visible text of the link.
`href`?	`string`	Destination URL; falls back to `#` when omitted.
`description`?	`string`	Optional secondary text shown beneath the label.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.