This webpage may load slower than usual due to examples
embedded into the iframe
elements, which increases load times.
Composition
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.
Usage
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>
Brand
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>
Menu
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"
];
}
Sticky
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>
Bordered
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>
Blurred
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>
Height
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>
Max-width
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>
Custom Styles
This component suppots named slots (represented as data-*
attributes) that
allow you to apply custom CSS to specific parts of the component.
- Root: 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.
<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">
Home
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem>
<LumexLink Href="/examples/navbar/custom-styles#"
Color="@ThemeColor.None">
About
</LumexLink>
</LumexNavbarItem>
</LumexNavbarContent>
<LumexNavbarContent Align="@Align.End">
<LumexTextbox Type="@InputType.Search"
Color="@ThemeColor.Info"
Variant="@InputVariant.Flat"
Size="@Size.Small"
Placeholder="Type to search..."
Classes="@_inputClasses">
<StartContent>
<LumexIcon Icon="@Icons.Rounded.Search" />
</StartContent>
</LumexTextbox>
</LumexNavbarContent>
</LumexNavbar>
@code {
private NavbarSlots _navbarClasses = new()
{
Root = "border-b-2 border-sky-100",
Brand = "bg-clip-text bg-gradient-to-r from-sky-900 to-sky-600 text-transparent",
Content = "gap-3",
Item = "px-4 py-1.5 rounded-lg text-sky-600 bg-sky-50 font-medium"
};
private InputFieldSlots _inputClasses = new()
{
Root = "max-w-full sm:max-w-[10rem] h-8",
Input = "text-tiny"
};
}
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.