Navbar - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Navbar Component

The Navbar component is used to produce a responsive navigation header with built-in support for collapsing.

Parameters

Name Type Description
BrandText string The text to use as the Brand text on the Navbar. The brand is the top-left element on the Navbar, which typically displays the name of the site or application.
BrandUrl string The link URL to use for the Brand text.
BrandImageUrl string The URL, either relative or absolute, to an image that will be used with the brand. .svg images work best, since they scale much better than bitmap based images such as .png or .jpg.
BrandTemplate RenderFragment Allows you to freely customize the Brand element on the Navbar.
CollapseBrand bool Specifies whether the Brand is included in the collapsing part of the Navbar. The default, false, leaves the Brand element outside of the collapsing part of the Navbar.
ColorScheme NavbarColor Defines the colour scheme for your Navbar. Controls the colour of the text used in the Navbar. You also have to specify the background colour for the Navbar.
ExpandAt NavbarExpandBreakpoint Specifies the responsive breakpoint at which the Navbar will expand from a collapsed state.
Placement NavbarPlacement Specifies the placement for the Navbar.

Examples

The following example shows the basic constructs of a Navbar component.

<Navbar BrandText="Site Name" BrandUrl="/">
    <NavbarNav>
        <NavItem Url="Page1" Text="Page 1" />
        <NavItem Url="Page1" Text="Page 2" />
    </NavbarNav>
</Navbar>

Adding a brand image to the Navbar component.

<Navbar BrandText="Site Name" BrandUrl="/" BrandImageUrl="/img/logo.svg">
    ...
</Navbar>

You can set the breakpoint at which the Navbar expands from a collapsed, mobile friendly menu to a full navigation menu. The options available are defined in the NavbarExpandBreakpoint enumeration.

<Navbar BrandText="Blazor Bootstrap" ExpandAt="NavbarExpandBreakpoint.SM">
</Navbar>

You can also specify multiple sections on the Navbar, and for instance align the last section to the right with the help of the Spacing utility.

<Navbar BrandText="Navbar">
    <NavbarNav>
        <NavItem Url="Page1" Text="Page 1" />
        <NavItem Url="Page1" Text="Page 2" />
    </NavbarNav>
    <NavbarNav MarginLeft="Spacing.Auto">
        <NavItem Url="/help" Text="Help" />
    </NavbarNav>
</Navbar>

The Navbar component also supports dropdown menus.

<Navbar BrandText="Navbar">
    <NavbarNav>
        <NavItem Url="Page1" Text="Page 1" />
        <DropdownNavItem Text="Dropdown">
            <DropdownItem Text="Item #1" />
            <DropdownItem Text="Item #2" />
        </DropdownNavItem>
        <NavItem Url="Page1" Text="Page 2" />
    </NavbarNav>
    <NavbarNav MarginLeft="Spacing.Auto">
        <DropdownNavItem Text="User">
            <DropdownItem Text="Profile" />
            <DropdownItem Text="Settings" />
            <DropdownDivider />
            <DropdownItem Text="Log Out" />
        </DropdownNavItem>
    </NavbarNav>
</Navbar>

The NavbarNav component also supports the menu items to be specified in the Items collection property to enable for more dynamic menu construction.

@code {
    List<MenuItem> items = new List<MenuItem>
    {
        new MenuItem { Text = "Item #1", Url = "/item1" },
        new MenuItem { Text = "Item #2", Url = "/item2" },
        new MenuItem
        {
            Text = "Dropdown",
            Children = new List<MenuItem>
            {
                new MenuItem { Text = "Child #1", Url = "/sub/1" },
                new MenuItem { Text = "Child #2", Url = "/sub/2" }
            }
        }
    };
}

<Navbar BrandText="Blazor Bootstrap">
    <NavbarNav Items="@this.items" />
</Navbar>
⚠️ **GitHub.com Fallback** ⚠️