Components

Navbar

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

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>

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>
        @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.

.

An unhandled error has occurred. Reload 🗙