Components

Navbar

The top bar of your page that includes support for branding, links, navigation, collapse menu and more.
Source Styles source

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>

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 supports named slots 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.

An unhandled error has occurred. Reload 🗙