This component is a composition of 7 key components:
LumexNavbar : A component representing a navbar.LumexNavbarBrand : A component representing the brand section.LumexNavbarContent : A component representing the content section.LumexNavbarItem : A component representing a navigation item.LumexNavbarMenu : A component representing a collapsible menu.LumexNavbarMenuItem : A component representing a navigation item of the menu.LumexNavbarMenuToggle : A component representing a button that toggles the menu.
The navbar component provides a navbar for your application,
supporting branding, links, and interactive elements in a structured layout.
<LumexNavbar>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/usage#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/usage#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Login
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
You can include a brand element in the navbar to display
your logo or name, enhancing brand recognition.
<LumexNavbar>
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/brand#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/brand#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
The navbar component includes a toggleable menu that is useful
when the navigation is hidden, organizing links and providing easy access on smaller screens.
<LumexNavbar>
<LumexNavbarContent>
<LumexNavbarMenuToggle Class="sm:hidden" />
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
</LumexNavbarContent>
<LumexNavbarContent Class="hidden sm:flex">
@foreach( var link in _navItems )
{
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/menu#"
Color="@ThemeColor.None">
@link
</LumexLink>
</LumexNavbarItem>
}
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarMenu Class="sm:hidden">
@foreach( var link in _navItems )
{
<LumexNavbarMenuItem>
<LumexLink Color="@ThemeColor.None">@link</LumexLink>
</LumexNavbarMenuItem>
}
</LumexNavbarMenu>
</LumexNavbar>
@code {
private string[] _navItems = [
"Home",
"About",
"Contact"
];
}
The navbar can be set to sticky, keeping it fixed at the top of the viewport
as the user scrolls, providing constant access to navigation options.
<LumexNavbar Sticky="@true">
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/sticky#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/sticky#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
Add a bottom border to the navbar for a more defined and structured look.
<LumexNavbar Bordered="@true"
Sticky="@true">
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/bordered#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/bordered#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
The navbar is blurred by default, creating a modern,
frosted-glass effect that blends with the page’s content.
However, you can disable this effect if a solid background is preferred.
<LumexNavbar Blurred="@false"
Bordered="@true"
Sticky="@true">
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/blurred#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/blurred#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
Set a custom height for the navbar to adjust its size.
<LumexNavbar Height="3rem"
Bordered="@true"
Sticky="@true">
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/height#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/height#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
Adjust the maximum width of the navbar to fit within your
layout and maintain consistency across different screen sizes.
<LumexNavbar MaxWidth="@MaxWidth.Small"
Bordered="@true"
Sticky="@true">
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/max-width#"
Color="@ThemeColor.None">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/max-width#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexNavbarItem>
<LumexButton Size="@Size.Small"
Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
Log In
</LumexButton>
</LumexNavbarItem>
</LumexNavbarContent>
</LumexNavbar>
This component supports named slots, which allow custom
styles to be applied to specific parts of the component:
Base: The overall container of the navbar.Wrapper: The container of all elements, providing a layout structure.Brand: The container of the brand content, such as a logo or application name.Content: The container of the main navigation items and links.Item: The individual navigation item, such as link or button.Toggle: The element that toggles the menu.ToggleIcon: The icon within the toggle that indicates the menu state.Menu: The container of collapsible menu.MenuItem: The individual navigation item within the menu.
You can customize the component(s) by passing
any Tailwind CSS classes to the following component parameters:
Navbar
Class: The CSS class name that styles the wrapper of the navbar.Classes: The CSS class names for the navbar slots that style entire navbar.
@using LumexUI.Shared.Icons
<LumexNavbar Bordered="@true"
Sticky="@true"
Classes="@_navbarClasses">
<LumexNavbarBrand>
<span class="font-bold text-xl">
Lumex<span class="font-normal">UI</span>
</span>
</LumexNavbarBrand>
<LumexNavbarContent Class="hidden sm:flex">
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/custom-styles#"
Color="@ThemeColor.None"
Class="px-4 py-1.5">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/custom-styles#"
Color="@ThemeColor.None"
Class="px-4 py-1.5">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexTextbox Type="@InputType.Search"
Size="@Size.Small"
Placeholder="Type to search..."
Classes="@_inputClasses">
<StartContent>
<SearchIcon Size="20" />
</StartContent>
</LumexTextbox>
</LumexNavbarContent>
</LumexNavbar>
@code {
private NavbarSlots _navbarClasses = new()
{
Base = "border-b-2 border-default-100",
Brand = "bg-clip-text bg-gradient-to-r from-foreground-900 to-foreground-600 text-transparent",
Content = "gap-3",
Item = "rounded-lg font-medium text-foreground bg-default-100 dark:bg-default-50"
};
private InputFieldSlots _inputClasses = new()
{
Base = "max-w-full sm:max-w-[10rem] h-8",
Input = "text-tiny"
};
}
See the API references below for a complete guide to all the
parameters available for the components mentioned here.
© 2025 LumexUI. All rights reserved.