Navbar

A responsive horizontal Navbar that can support images, links, buttons, and dropdowns

API Documentation

How it works #

The Navbar component provides a responsive horizontal navigation bar that supports branding, navigation links, dropdown menus, and action buttons.

How to use:
  1. Add the Navbar component to your page.
  2. Use NavbarBrand for your logo or brand name.
  3. Place navigation links inside NavbarMenu using NavbarStart and NavbarEnd for left and right alignment.
  4. Add NavbarItem for each link or menu item. Use HasDropdown and NavbarDropdown for dropdown menus.
  5. Include action buttons (e.g., sign up, log in) using the Buttons and Button components inside NavbarEnd.
This demo shows a typical setup with branding, navigation links, a dropdown menu, and action buttons. 
<Navbar Class="px-3" HasShadow="true">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Primary">Sign up</Button>
                <Button>Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Colors #

The Navbar component supports multiple color themes to match your application's style. You can set the Color parameter to apply Bulma's built-in color schemes, such as Primary, Link, Info, Success, Warning, Danger, Black, Dark, Light, and White.

How to use:
  1. Set the Color parameter on the Navbar component to the desired NavbarColor value.
  2. Each color option provides a different visual style for the navbar background and text.
  3. Use the demos below to preview each color variant and see how it affects the navbar appearance.
The following sections demonstrate each available color option.

Primary #

The Primary color theme applies your application's primary color to the navbar background.

How to use:
  1. Set Color="NavbarColor.Primary" on the Navbar component.
  2. Use ButtonColor.Primary for buttons to match the navbar style.
This demo shows a navbar with the primary color scheme. 
<Navbar Class="px-3" Color="NavbarColor.Primary">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Primary" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Primary" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>
The Link color theme uses the link color for the navbar background, providing a distinct accent.

How to use:
  1. Set Color="NavbarColor.Link" on the Navbar component.
  2. Style buttons with ButtonColor.Link for a consistent look.
This demo displays the navbar with the link color scheme. 
<Navbar Class="px-3" Color="NavbarColor.Link">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Link" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Link" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Info #

The Info color theme gives the navbar an informational blue background.

How to use:
  1. Set Color="NavbarColor.Info" on the Navbar component.
  2. Use ButtonColor.Info for action buttons to match the navbar.
This demo shows the info color applied to the navbar. 
<Navbar Class="px-3" Color="NavbarColor.Info">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Info" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Info" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Success #

The Success color theme applies a green background, ideal for positive or confirmation contexts.

How to use:
  1. Set Color="NavbarColor.Success" on the Navbar component.
  2. Style buttons with ButtonColor.Success for a unified appearance.
This demo features the success color scheme. 
<Navbar Class="px-3" Color="NavbarColor.Success">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Success" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Success" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Warning #

The Warning color theme uses a yellow background to draw attention or indicate caution.

How to use:
  1. Set Color="NavbarColor.Warning" on the Navbar component.
  2. Use ButtonColor.Warning for matching action buttons.
This demo highlights the warning color style. 
<Navbar Class="px-3" Color="NavbarColor.Warning">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Warning" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Warning" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Danger #

The Danger color theme applies a red background, suitable for error or alert contexts.

How to use:
  1. Set Color="NavbarColor.Danger" on the Navbar component.
  2. Style buttons with ButtonColor.Danger for consistency.
This demo demonstrates the danger color scheme. 
<Navbar Class="px-3" Color="NavbarColor.Danger">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Danger" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Danger" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Black #

The Black color theme gives the navbar a solid black background for a bold look.

How to use:
  1. Set Color="NavbarColor.Black" on the Navbar component.
  2. Use ButtonColor.Black for matching buttons.
This demo shows the black color applied to the navbar. 
<Navbar Class="px-3" Color="NavbarColor.Black">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Black" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Black" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Dark #

The Dark color theme provides a dark gray background for a modern, subtle appearance.

How to use:
  1. Set Color="NavbarColor.Dark" on the Navbar component.
  2. Style buttons with ButtonColor.Dark for a cohesive look.
This demo features the dark color scheme. 
<Navbar Class="px-3" Color="NavbarColor.Dark">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Dark" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Dark" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Light #

The Light color theme applies a light gray background, ideal for clean and minimal interfaces.

How to use:
  1. Set Color="NavbarColor.Light" on the Navbar component.
  2. Use ButtonColor.Light for action buttons to match the navbar.
This demo displays the light color scheme. 
<Navbar Class="px-3" Color="NavbarColor.Light">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Light" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.Light" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

White #

The White color theme gives the navbar a white background for a classic, clean look.

How to use:
  1. Set Color="NavbarColor.White" on the Navbar component.
  2. Style buttons with ButtonColor.White for a unified appearance.
This demo shows the white color applied to the navbar. 
<Navbar Class="px-3" Color="NavbarColor.White">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.White" IsSoftVersion="true">Sign up</Button>
                <Button Color="ButtonColor.White" IsLightVersion="true">Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>

Transparent #

The Transparent option allows the navbar to have a transparent background, making it blend seamlessly with the page content or background images.

How to use:
  1. Set IsTransparent="true" on the Navbar component.
  2. Combine with custom classes or styles for further visual customization.
This demo illustrates a transparent navbar overlaying the page content. 
<Navbar Class="px-3" IsTransparent="true">
    <NavbarBrand>
        <NavbarItem Href="/" IsHoverable="false">
            <img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
            <span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
        </NavbarItem>
    </NavbarBrand>

    <NavbarMenu Id="navbarBasicExample1">
        <NavbarStart>
            <NavbarItem Class="mr-1" Href="/">
                <i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
            </NavbarItem>
            <NavbarItem Class="mr-1" Href="/docs">
                <i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
            </NavbarItem>

            <NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
                <NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
                <NavbarDropdown Position="NavbarDropdownPosition.Right">
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
                    <NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
                </NavbarDropdown>
            </NavbarItem>
        </NavbarStart>
        <NavbarEnd>
            <Buttons Size="ButtonSize.Small">
                <Button Color="ButtonColor.Primary">Sign up</Button>
                <Button>Log in</Button>
            </Buttons>
        </NavbarEnd>
    </NavbarMenu>
</Navbar>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!