Header Navigation Component

With Dropdown Menus

Click "Products" or "Resources" to open their dropdown panels with menu items and a featured card.

Desktop — Simple

Desktop — Avatar Fallback

When no avatar URL is provided, the first letter of the name is shown.

Full — With Mobile Footer Items

Resize to <768px to see the mobile layout. The slide-out panel includes icons, badges, chevrons, footer links (Settings, Support with online badge, Open in browser), and the account card.

Minimal

No search, settings, or notifications buttons.

Usage examples

Copy-paste-ready snippets for HeaderNavigation.

Basic header

<HeaderNavigation LogoText="Untitled UI"
                  Items="navItems"
                  @bind-ActiveItem="activeItem"
                  AccountName="Olivia Rhye"
                  AccountEmail="olivia@untitledui.com" />

@code {
    private string activeItem = "Dashboard";

    private List<HeaderNavigation.HeaderNavItem> navItems = new()
    {
        new() { Label = "Dashboard" },
        new() { Label = "Projects" },
        new() { Label = "Tasks" },
        new() { Label = "Reports" },
    };
}

With search & actions

<HeaderNavigation LogoText="Untitled UI"
                  Items="navItems"
                  @bind-ActiveItem="activeItem"
                  ShowSearch="true"
                  ShowSettings="true"
                  ShowNotifications="true"
                  SearchShortcut="⌘K"
                  OnSearchClicked="HandleSearch"
                  OnSettingsClicked="HandleSettings"
                  OnNotificationsClicked="HandleNotifications" />