Website Header
A public-facing site header with a logo, primary navigation links, optional dropdown menus, and CTA buttons. Includes a mobile hamburger toggle that reveals a full drawer.
With dropdown navigation
Nav items with a dropdownItems array render a chevron trigger and a small floating panel. Click outside or press Esc to close.
Simple (links only)
Omitting dropdownItems renders each nav item as a plain link with no chevron.
Custom CTA labels
Use loginLabel and signupLabel to override the default button copy.
Single column with footer link
Use dropdownVariant="single-footer" with dropdownFooterLink to add an “All resources” style link below the item list.
Two-column grid
Use dropdownVariant="two-col-grid" to display a large item set in a responsive two-column grid — ideal for resource hubs with 6–12 links.
Grouped mega menu
Use dropdownVariant="two-col-grouped" with dropdownGroups for labelled sections and an optional dropdownFooterCTAs strip at the bottom. Set iconBoxed on items for the bordered card icon style.
Side featured card
Use dropdownVariant="side-featured" with a featuredCard to display an image card alongside the link list — great for highlighting a new feature or article.
Two-column grid (floating)
Combine dropdownVariant="two-col-grid" with dropdownDisplay="floating" to render the two-column grid as a floating dropdown instead of a full-width mega panel.
Grouped mega menu (floating)
Combine dropdownVariant="two-col-grouped" with dropdownDisplay="floating" to render grouped sections in a floating dropdown with rounded corners.
Side featured card (mega)
Combine dropdownVariant="side-featured" with dropdownDisplay="mega" to render the featured card layout as a full-width in-flow mega panel.