Blazorise Bar component

A responsive navbar that can support images, links, buttons, and dropdowns.

The Bar component is a responsive and versatile navigation bar that can be used as a top menu in Horizontal mode or as a sidebar in one of the three Vertical modes.

<Bar> the main container.
- <BarBrand> Horizontal: the left side, always visible. Vertical: top of Bar branding.
- <BarToggler> Horizontal: toggles the bar. Vertical: read more below.
- <BarMenu> Horizontal: the right side, hidden on breakpoint. Vertical: contains the core menu elements.
  - <BarStart> Horizontal: left side menu. Vertical: sticky top menu.
  - <BarEnd> Horizontal: right side menu. Vertical: sticky bottom menu.
    - <BarItem > each single item of the bar menu
      - <BarLink> item link or button
        
        <BarIcon> icon for Bar item (required for BarMode.VerticalSmall)
      - <BarDropdown> dropdown container (or popout for BarMode.VerticalPopout)
        
        <BarDropdownToggle> dropdown trigger
        
        <BarDropdownMenu> the dropdown menu, which can include bar items and dividers for BarMode.VerticalPopout)
        
        <BarDropdownItem> each single item of the dropdown menu
        
        <BarDropdownDivider> Divider that can be placed between BarDropdownItem's.
        
        <BarDropdown> by adding this again inside the menu, you will create nested dropdowns

Top Bar (with dropdown)

<Bar Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarBrand>
        Brandname
    </BarBrand>
    <BarToggler />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#home">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#docs">Documentation</BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>Dropdown</BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem>Action</BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem>Another action</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Primary">Sign up</Button>
                <Button Color="Color.Secondary">Log in</Button>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>

Dropdown toggle with navigation target

BarDropdownToggle supports To the same way as other Blazorise link components. With the default Trigger="BarDropdownToggleTrigger.Auto", setting To makes the label navigate while the chevron icon toggles the submenu. This example uses Match="Match.Prefix" so the parent link stays active while the example items navigate to sections of the Bar docs page.

<Bar Mode="BarMode.VerticalInline">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle To="/docs/components/bar" Match="Match.Prefix">
                        <BarIcon IconName="IconName.Dashboard" />
                        Bar docs
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="/docs/components/bar#bar-top-bar">Top Bar</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/bar#bar-vertical-sidebar">Vertical Sidebar</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/bar#bar-nested-dropdowns">Nested Dropdowns</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Dropdown trigger: icon toggles, label navigates

This is the explicit form of the default To behavior. Use it when you want the intent to be visible in markup or when composing trigger flags elsewhere in the menu.

<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle To="/docs/components/button"
                                       Trigger="BarDropdownToggleTrigger.IconClick">
                        <BarIcon IconName="IconName.Dashboard" />
                        Components
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="/docs/components/bar">Bar overview</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/button">Button</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/card">Card</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Dropdown trigger: click anywhere + URL match

When users should be able to expand from either the label or icon, combine triggers with a flags expression. In this example, Trigger="BarDropdownToggleTrigger.ClickAny | BarDropdownToggleTrigger.RouteMatch" keeps the dropdown expanded whenever the current URL matches To.

<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle To="/docs/components/bar"
                                       Trigger="BarDropdownToggleTrigger.ClickAny | BarDropdownToggleTrigger.RouteMatch">
                        <BarIcon IconName="IconName.Dashboard" />
                        Bar docs
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="/docs/components/bar">Overview</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/button">Button</BarDropdownItem>
                        <BarDropdownItem To="/docs/components/card">Card</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

When using the Bar in one of the Vertical modes for the purpose of a Sidebar, you need to place it inside the LayoutSiderContent component. Please see the Layout docs for more information on setup with Sidebar.

<Bar Mode="BarMode.VerticalInline"
     CollapseMode="BarCollapseMode.Small"
     Breakpoint="Breakpoint.Desktop"
     NavigationBreakpoint="Breakpoint.Tablet"
     ThemeContrast="ThemeContrast.Dark">
    <BarBrand>
        <BarItem>
            <BarLink To="#">
                <BarIcon IconName="IconName.Dashboard" />
                Blazorise Demo
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#home">
                    <BarIcon IconName="IconName.Dashboard" />
                    Home
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#docs">Documentation</BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.Edit" />
                        Dropdown
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem>Action</BarDropdownItem>
                        <BarDropdownItem>Another action</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Note: The BarIcon is required for each BarLink or BarDropdownToggle when using BarMode.VerticalSmall or BarCollapseMode.Small, in order for it work correctly. For a demo of the Vertical bar in action, please check out this Blazorise demo.

Right-aligned Vertical Bar

You can create a right-aligned Vertical style Bar easily by following two key principals.

Using the Layout to accommodate the right-align bar, by putting the LayoutSider section after the Layout section (see in example below).
Adding RightAligned to ALL BarDropdownMenu within the Vertical bar.

Right-aligned vertical bar example:

<Layout Sider>
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#">
                            <BarIcon IconName="IconName.Dashboard" />
                            Example
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarDropdown RightAligned>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Edit" />
                                    Toggle
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem>Action</BarDropdownItem>
                                    <BarDropdownItem>Another action</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                    </BarStart>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
</Layout>

Vertical Bar Toggler

The BarToggler for Vertical Bar supports 2 modes:

BarTogglerMode.Normal (default)
BarTogglerMode.Popout

These 2 modes, along with an external implementation, provides 3 easy to configure implementations.

1. Inline

By simply adding the BarToggler anywhere inside the Vertical Bar component (at the top level), you will have an inline toggler added to your bar at this location.

<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarToggler />
    <BarBrand>
        <BarItem>
            <BarLink To="#">
                <BarIcon IconName="IconName.Dashboard" />
                Example
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarMenu>
        <BarItem>Example</BarItem>
    </BarMenu>
</Bar>

2. Popout Once again, by simply adding the BarToggler anywhere inside the Vertical Bar component (at the top level), and setting the Mode to Popout you will have an popout toggler added to your bar at this location.

<Bar Mode="BarMode.VerticalInline"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarBrand>
        <BarItem>
            <BarLink To="#">
                <BarIcon IconName="IconName.Dashboard" />
                Blazorise Demo
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler Mode="BarTogglerMode.Popout" />
    <BarMenu>
        <BarItem>Popout!</BarItem>
    </BarMenu>
</Bar>

3. External (controlled by Top Bar) For an externally controlled BarToggler, you need to be using the top bar. Where you have a top bar and vertical bar, you can add multiple BarTogglers to the top bar and choose to have one of these control the vertical bar by simply setting the Bar property. In the example below, we will create two BarTogglers inside the top bar.

One to control the Vertical Bar (closest to it)
One to control the Top Bar (at the opposite end)

<Layout Sider>
    <LayoutSider>
        <LayoutSiderContent>
            <Bar @ref="@sidebar" Mode="BarMode.VerticalInline"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarItem>Example</BarItem>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <Bar Mode="BarMode.Horizontal"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarToggler Bar="@sidebar" />
                <BarBrand>
                    <BarItem>
                        <BarLink To="#">
                            <BarIcon IconName="IconName.Dashboard" />
                            Example
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarItem>Example</BarItem>
                </BarMenu>
                <BarToggler />
            </Bar>
        </LayoutHeader>
    </Layout>
</Layout>

@code {
    private Bar sidebar;
}

Nested Dropdowns

To create nested BarDropdowns, you can simply add a BarDropdown component inside the structure of an existing BarDropdownMenu.

<Bar Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light">
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        Top-level toggler
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem>
                            Top-level item
                        </BarDropdownItem>
                        <BarDropdown>
                            <BarDropdownToggle>
                                Nested toggler
                            </BarDropdownToggle>
                            <BarDropdownMenu>
                                <BarDropdownItem>
                                    Nested item
                                </BarDropdownItem>
                            </BarDropdownMenu>
                        </BarDropdown>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

Header on top

For an example where the horizontal Bar is “on top” of the vertical Bar, please look at this example in the Layout docs.

API

Parameters

Bar

Parameter	Description	Type	Default
`Alignment`	Defines the alignment within bar. Possible values:`Default`, `Start`, `Center`, `End`	`Alignment`	`Alignment.Default`
`Breakpoint`	Used for responsive collapsing. Possible values:`None`, `Mobile`, `ExtraSmall`, `Tablet`, `Small`, `Desktop`, `Medium`, `Widescreen`, `Large`, `FullHD`, `ExtraLarge`, `QuadHD`, `ExtraExtraLarge`	`Breakpoint`	`Breakpoint.None`
`ChildContent`	Specifies the content to be rendered inside this Bar.	`RenderFragment`	`null`
`CollapseMode`	Defines how the bar will be collapsed. Possible values:`Hide`, `Small`	`BarCollapseMode`	`BarCollapseMode.Hide`
`MenuToggleBehavior`	Defines how the bar menu will behave when toggled. Possible values:`AllowSingleMenu`, `AllowMultipleMenus`	`BarMenuToggleBehavior`	`BarMenuToggleBehavior.AllowMultipleMenus`
`Mode`	Defines the orientation for the bar. `Vertical*` is required when using as a Sidebar. Possible values:`Horizontal`, `VerticalPopout`, `VerticalInline`, `VerticalSmall`	`BarMode`	`BarMode.Horizontal`
`NavigationBreakpoint`	Used for responsive collapsing after Navigation. Possible values:`None`, `Mobile`, `ExtraSmall`, `Tablet`, `Small`, `Desktop`, `Medium`, `Widescreen`, `Large`, `FullHD`, `ExtraLarge`, `QuadHD`, `ExtraExtraLarge`	`Breakpoint`	`Breakpoint.None`
`ThemeContrast`	Defines the preferred theme contrast for this Bar component. Possible values:`None`, `Light`, `Dark`	`ThemeContrast`	`ThemeContrast.None`
`Visible`	Controls the state of toggler and the menu.	`bool`	`false`

BarLink

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this BarLink.	`RenderFragment`	`null`
`Match`	URL matching behavior for a link. Possible values:`Prefix`, `All`	`Match`	`Match.All`
`Target`	The target attribute specifies where to open the linked document.	`Target`	`Target.Default`
`Title`	Specify extra information about the element.	`string`
`To`	Specifies the URL of the page the link goes to.	`string`

BarDropdownToggle

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this Link.	`RenderFragment`	`null`
`Disabled`	Makes the link look inactive by adding the disabled boolean attribute.	`bool`	`false`
`Indentation`	Determines how much left padding will be applied to the dropdown toggle. (in rem unit)	`double`	`1.5d`
`Match`	URL matching behavior for a link. Possible values:`Prefix`, `All`	`Match`	`Match.Prefix`
`Stretched`	Makes any HTML element or component clickable by “stretching” a nested link.	`bool`	`false`
`TabIndex`	Specifies whether the link element can be focused and where it participates in sequential keyboard navigation.	`int?`	`null`
`Target`	The target attribute specifies where to open the linked document.	`Target`	`Target.Default`
`Title`	Specify extra information about the element.	`string`
`To`	Denotes the target route of the link.	`string`
`ToggleIconVisible`	Gets or sets a value indicating whether the dropdown toggle icon is visible. Remarks Default: True	`bool?`	`null`
`Trigger`	Defines which interactions can trigger the dropdown toggle. Possible values:`Auto`, `ToggleClick`, `IconClick`, `ClickAny`, `RouteMatch`, `All`	`BarDropdownToggleTrigger`	`default(BarDropdownToggleTrigger)`
`Unstyled`	Removes default color styles from the link.	`bool`	`false`

Events

Bar

Event	Description	Type
`VisibleChanged`	Occurs when the bar visibility changes.	`EventCallback<bool>`

BarLink

Event	Description	Type
`Clicked`	Occurs when the item is clicked.	`EventCallback<MouseEventArgs>`
`CustomMatch`	A callback function that is used to compare current uri with the user defined uri. If defined, the Match parameter will be ignored.	`Func<string, bool>`

BarDropdownToggle

Event	Description	Type
`Clicked`	Occurs when the link is clicked.	`EventCallback<MouseEventArgs>`
`CustomMatch`	A callback function that is used to compare current uri with the user defined uri. If defined, the Match parameter will be ignored.	`Func<string, bool>`

Methods

Bar

Method	Description	Return	Parameters
`HideAllExcept`	Hides all items except the one that is passed as a parameter.	`Task`	`BarItem barItem`
`Toggle`	Toggles the Visible state of the Bar component.	`Task`

BarDropdownToggle

Method	Description	Return	Parameters
`Close`	Triggers the closable component to be closed.	`Task`	`CloseReason closeReason`
`IsSafeToClose`	Finds if the closable component is ready to be closed.	`Task<bool>`	`string elementId, CloseReason closeReason, bool isChildClicked`

Blazorise Bar component

Top Bar (with dropdown)

Dropdown toggle with navigation target

Dropdown trigger: icon toggles, label navigates

Dropdown trigger: click anywhere + URL match

Vertical Bar (Sidebar)

Right-aligned Vertical Bar

Vertical Bar Toggler

Nested Dropdowns

Header on top

API

Parameters

Bar

BarLink

BarDropdownToggle

Events

Bar

BarLink

BarDropdownToggle

Methods

Bar

BarDropdownToggle

On this page