Navbar
Navigation bar
Overview
A compound sticky navbar component. Desktop links use Radix UI NavigationMenu with dropdown and mega-menu support. The mobile menu renders a slide-in drawer with two-level navigation (drill-down).
Usage
import { Navbar } from "@leanicon/web-builder-library";Default
Simple navbar with plain links, action buttons, and a mobile hamburger menu.
With dropdowns
Links with children render as dropdown menus.
With mega-menu
Links with megaMenu render a full-width categorized panel with optional badges, descriptions, indicators, and footer links.
Minimal trigger variant
Set triggerVariant="minimal" for transparent trigger buttons without background.
Mobile view
Pass className="!block" to Navbar.MobileMenu to force the hamburger visible regardless of viewport width. Desktop links and actions are hidden on mobile via hidden md:flex.
Mobile view with dropdowns
Mobile view with mega-menu
Dark mode
With mega-menu — dark mode
Sub-components
Sub-component | Props | Description |
|---|---|---|
|
| Brand logo link |
|
| Desktop nav links with dropdowns |
|
| CTA buttons/links (hidden on mobile) |
|
| Hamburger + slide-in drawer |
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Sub-components (required) |
|
|
| Custom link component (e.g. Next.js |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
Notes
Navbar.LinksacceptstriggerVariant="minimal"for transparent trigger buttons.NavMegaMenuItemsupportsbadge(pill),description(subtitle), andindicator(colored dot).- The mega-menu renders full-width with up to 3 category columns and optional footer links.
- The mobile drawer supports drill-down navigation for both
childrenandmegaMenuitems. linkComponentprop enables custom link components (e.g. Next.jsLink) for SPA navigation.- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
colorScheme | enum | — | No | |
className | string | — | No | |
linkComponent | ElementType<any, keyof IntrinsicElements> | a | No | Custom link component (e.g. Next.js Link) used for all internal navigation. Defaults to `"a"`. |
src | string | — | Yes | |
alt | string | — | Yes | |
width | number | — | No | |
height | number | — | No | |
priority | boolean | — | No | Likely LCP element — threaded from block adapters (spec 007, Research D5). |
href | string | / | No | |
items | NavLinkItem[] | — | Yes | |
triggerVariant | enum | default | No |