Navigation & Headers
Header with Text Links
A navigation menu component
Overview
The Header with Text Links component provides a navigation menu with text links and optional mega menu or dropdown content. It fits in the main header for category and page navigation with configurable columns and content slots.
Key Business & UX Benefits
- Text links and optional flyouts support simple and complex nav in one component.
- Content columns and headlines support mega menu and dropdown layouts.
- Consistent styling with other nav components keeps the header coherent.
- Accessible keyboard and focus support for all menu items.
Pro-Tip from Larry: Use text links with content columns for mega menus so categories are easy to scan.
Usage
LuiNavigationMenu
Feature List
- Text link navigation with optional icon items
- Content columns and headlines for mega menu content
- Separator and list layout support
- Keyboard navigation and accessible focus management
API Reference
LuiNavigationMenu
| Prop | Default | Type |
|---|---|---|
as | string | |
textColor | dark | "dark" | "light" |
| Slot | Type |
|---|---|
default | {} |
LuiNavigationMenuContentColumn
| Prop | Default | Type |
|---|---|---|
width | 243px | string |
| Slot | Type |
|---|---|
default | {} |
LuiNavigationMenuContentHeadline
| Slot | Type |
|---|---|
default | {} |
LuiNavigationMenuContentLink
| Prop | Default | Type |
|---|---|---|
hrefrequired | string | |
target | string |
| Slot | Type |
|---|---|
default | {} |
LuiNavigationMenuContentList
| Slot | Type |
|---|---|
default | {} |
LuiNavigationMenuContentSeparator
LuiNavigationMenuIconItem
| Prop | Default | Type |
|---|---|---|
labelrequired | string | |
isActive | boolean | |
disabled | boolean | |
count | string | |
href | string | |
orientation | vertical | "horizontal" | "vertical" |
| Slot | Type |
|---|---|
default | {} |
content | {} |
LuiNavigationMenuTextItem
| Prop | Default | Type |
|---|---|---|
as | string | |
hrefrequired | string | |
isActive | boolean | |
disabled | boolean | |
inTopbar | boolean | |
topBarColor | "default" | "dark" | "light" | |
orientation | vertical | "horizontal" | "vertical" |
variant | string |
| Slot | Type |
|---|---|
default | {} |
content | {} |
LuiNavigationMenuTextItemWrapper
| Prop | Default | Type |
|---|---|---|
textColor | "default" | "dark" | "light" | |
border | bottom | "bottom" | "full" |
inTopbar | boolean | |
variant | string |
| Slot | Type |
|---|---|
default | {} |