Blazorise Bar component

Keep application navigation and common actions within easy reach.

Use the Bar component to help users move between the main areas of your application. It works as a horizontal header or a vertical sidebar, bringing navigation, branding, and actions such as search or account access into a consistent location.

Structure

A typical Bar combines branding, a toggler, and a menu. Within BarMenu, BarStart and BarEnd group BarItem components that contain links, dropdowns, or other controls.

<Bar>The navigation container.
- <BarBrand>Branding at the start of a horizontal bar or top of a vertical bar.
- <BarToggler>Controls menu expansion or vertical bar collapse.
- <BarMenu>Contains navigation groups; collapses at the configured breakpoint in horizontal mode.
  - <BarStart>Start menu in horizontal mode; sticky top menu in vertical mode.
    - <BarItem>One menu item containing a link, dropdown, or another control.
      - <BarLink>A navigation link or action.
        <BarIcon>An icon for the item; required in compact vertical modes.
      - <BarDropdown>An alternative to a link; shown as a popout in BarMode.VerticalPopout.
        <BarDropdownToggle>The dropdown trigger.
        <BarIcon>An icon for the trigger; required in compact vertical modes.
        
        <BarDropdownMenu>The dropdown's contents.
        <BarDropdownItem>A link or action within the dropdown.
        
        <BarDropdownDivider>An optional separator between groups of items.
        
        <BarDropdown>An optional nested dropdown that repeats this structure.
  - <BarEnd>End menu in horizontal mode; sticky bottom menu in vertical mode.
    - <BarItem>Uses the same item structure as BarStart.

BarItem can contain a link, dropdown, or another control. The item structure shown in BarStart also applies to BarEnd.

Examples

Application Header

A typical horizontal Bar has a brand, primary navigation, utility actions, and an account dropdown. Use BarStart for main navigation and BarEnd for actions that should stay aligned to the opposite side.

<Bar Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Shadow="Shadow.Default">
    <BarBrand>
        <BarItem>
            <BarLink To="#dashboard">
                <BarIcon IconName="IconName.LayerGroup" />
                Atlas CRM
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#pipeline">
                    Pipeline
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#accounts">
                    Accounts
                </BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        Reports
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#sales-report">Sales summary</BarDropdownItem>
                        <BarDropdownItem To="#activity-report">Team activity</BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem To="#scheduled-reports">Scheduled reports</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Light" Outline>
                    <Icon Name="IconName.Search" />
                </Button>
            </BarItem>
            <BarItem>
                <Button Color="Color.Light" Outline>
                    <Icon Name="IconName.Bell" />
                    <Badge Color="Color.Danger" Pill>3</Badge>
                </Button>
            </BarItem>
            <BarItem>
                <BarDropdown RightAligned>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.UserCircle" />
                        Maya Stone
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#profile">Profile</BarDropdownItem>
                        <BarDropdownItem To="#preferences">Preferences</BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem To="#sign-out">Sign out</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>

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>

Icon Trigger

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>

Route Matching

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>

Application Sidebar

For a sidebar layout, place the vertical Bar inside LayoutSiderContent. This pattern keeps navigation, content, and header regions in predictable layout slots. Please see the Layout docs for more information on setup with Sidebar.

The vertical Bar works well as the primary navigation inside a layout sider.

<Layout Sider Height="Height.Px().Min( 420 )">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 NavigationBreakpoint="Breakpoint.Tablet"
                 ThemeContrast="ThemeContrast.Dark"
                 MenuToggleBehavior="BarMenuToggleBehavior.AllowSingleMenu">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#workspace">
                            <BarIcon IconName="IconName.LayerGroup" />
                            Ops Console
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#overview">
                                <BarIcon IconName="IconName.Dashboard" />
                                Overview
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.ChartLine" />
                                    Analytics
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#traffic">Traffic</BarDropdownItem>
                                    <BarDropdownItem To="#conversion">Conversion</BarDropdownItem>
                                    <BarDropdownItem To="#retention">Retention</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Users" />
                                    Customers
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#all-customers">All customers</BarDropdownItem>
                                    <BarDropdownItem To="#segments">Segments</BarDropdownItem>
                                    <BarDropdownItem To="#imports">Imports</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#billing">
                                <BarIcon IconName="IconName.Receipt" />
                                Billing
                            </BarLink>
                        </BarItem>
                    </BarStart>
                    <BarEnd>
                        <BarItem>
                            <BarLink To="#settings">
                                <BarIcon IconName="IconName.Settings" />
                                Settings
                            </BarLink>
                        </BarItem>
                    </BarEnd>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <Div Padding="Padding.Is3" Background="Background.Light" Border="Border.Is1.OnBottom">
                <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Workspace overview</Heading>
            </Div>
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is3">
            <Card>
                <CardBody>
                    The vertical Bar works well as the primary navigation inside a layout sider.
                </CardBody>
            </Card>
        </LayoutContent>
    </Layout>
</Layout>

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 full demo of the vertical bar in action, please check out the Blazorise Bootstrap 5 demo.

Right-aligned Sidebar

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

Use Layout to place the LayoutSider after the main Layout section.
Add RightAligned to dropdowns that should open toward the left side of the right rail.

Right-side navigation is useful for context tools, inspectors, and account panels.

<Layout Sider Height="Height.Px().Min( 360 )">
    <Layout>
        <LayoutContent Padding="Padding.Is3">
            <Card>
                <CardBody>
                    Right-side navigation is useful for context tools, inspectors, and account panels.
                </CardBody>
            </Card>
        </LayoutContent>
    </Layout>
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#inspector">
                            <BarIcon IconName="IconName.SliderHorizontal" />
                            Inspector
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarDropdown RightAligned>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Filter" />
                                    Filters
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#assigned">Assigned to me</BarDropdownItem>
                                    <BarDropdownItem To="#due-soon">Due soon</BarDropdownItem>
                                    <BarDropdownItem To="#blocked">Blocked</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#activity">
                                <BarIcon IconName="IconName.History" />
                                Activity
                            </BarLink>
                        </BarItem>
                    </BarStart>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
</Layout>

Vertical Bar Toggler

The BarToggler for a vertical Bar supports two modes:

BarTogglerMode.Normal (default)
BarTogglerMode.Popout

These modes, along with an external implementation, provide three common implementations.

1. Inline

Add the BarToggler inside the vertical Bar to let the user collapse and expand the rail in place.

<Bar Mode="BarMode.VerticalInline"
     CollapseMode="BarCollapseMode.Small"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Border="Border.Is1">
    <BarToggler />
    <BarBrand>
        <BarItem>
            <BarLink To="#inventory">
                <BarIcon IconName="IconName.Store" />
                Inventory
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#products">
                    <BarIcon IconName="IconName.ShoppingBag" />
                    Products
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="#orders">
                    <BarIcon IconName="IconName.ShoppingCart" />
                    Orders
                </BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.Truck" />
                        Shipping
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#labels">Labels</BarDropdownItem>
                        <BarDropdownItem To="#carriers">Carriers</BarDropdownItem>
                        <BarDropdownItem To="#returns">Returns</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

2. Popout Set Mode="BarTogglerMode.Popout" when the toggler should sit outside the collapsed rail.

<Bar Mode="BarMode.VerticalInline"
     CollapseMode="BarCollapseMode.Small"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Border="Border.Is1">
    <BarBrand>
        <BarItem>
            <BarLink To="#support">
                <BarIcon IconName="IconName.Headset" />
                Support
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler Mode="BarTogglerMode.Popout" />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="#queue">
                    <BarIcon IconName="IconName.Inbox" />
                    Queue
                </BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        <BarIcon IconName="IconName.Book" />
                        Knowledge
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#articles">Articles</BarDropdownItem>
                        <BarDropdownItem To="#macros">Macros</BarDropdownItem>
                        <BarDropdownItem To="#training">Training</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

3. External (controlled by Top Bar) In layouts with both a top bar and a sidebar, a top-bar toggler can control the sidebar by setting the Bar property. The example below uses two togglers inside the top bar.

One controls the vertical Bar.
One controls the horizontal Bar menu.

The first toggler controls the sidebar. The second toggler controls the horizontal bar menu.

<Layout Sider Height="Height.Px().Min( 360 )">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar @ref="@sidebar"
                 Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#projects">
                            <BarIcon IconName="IconName.Briefcase" />
                            Projects
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#roadmap">
                                <BarIcon IconName="IconName.Map" />
                                Roadmap
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#calendar">
                                <BarIcon IconName="IconName.Calendar" />
                                Calendar
                            </BarLink>
                        </BarItem>
                    </BarStart>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <Bar Mode="BarMode.Horizontal"
                 Breakpoint="Breakpoint.Desktop"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light"
                 Shadow="Shadow.Default">
                <BarToggler Bar="@sidebar" />
                <BarBrand>
                    <BarItem>
                        <BarLink To="#planning">
                            Planning
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarEnd>
                        <BarItem>
                            <Button Color="Color.Primary">
                                New project
                            </Button>
                        </BarItem>
                    </BarEnd>
                </BarMenu>
                <BarToggler />
            </Bar>
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is3">
            <Paragraph>
                The first toggler controls the sidebar. The second toggler controls the horizontal bar menu.
            </Paragraph>
        </LayoutContent>
    </Layout>
</Layout>

@code {
    private Bar sidebar;
}

Nested Dropdowns

To create nested dropdowns, place a BarDropdown inside an existing BarDropdownMenu. This is useful for admin, reporting, and settings menus where the top-level item groups related actions.

<Bar Breakpoint="Breakpoint.Desktop"
     Background="Background.Light"
     ThemeContrast="ThemeContrast.Light"
     Border="Border.Is1">
    <BarBrand>
        <BarItem>
            <BarLink To="#admin">
                <BarIcon IconName="IconName.Settings" />
                Admin
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>
                        Organization
                    </BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="#teams">Teams</BarDropdownItem>
                        <BarDropdownItem To="#members">Members</BarDropdownItem>
                        <BarDropdown>
                            <BarDropdownToggle>
                                Security
                            </BarDropdownToggle>
                            <BarDropdownMenu>
                                <BarDropdownItem To="#roles">Roles</BarDropdownItem>
                                <BarDropdownItem To="#permissions">Permissions</BarDropdownItem>
                                <BarDropdownItem To="#audit-log">Audit log</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.

Best Practices

Keep Navigation Predictable

Keep primary navigation stable across pages and order destinations by importance or user workflow. Use clear text labels, and provide an accessible label or tooltip when an item is represented by an icon alone. Dropdown hierarchies should remain shallow enough to scan and navigate comfortably.

Responsive Design

Verify both collapsed and expanded states at every supported breakpoint. The toggler must remain easy to find, the active destination should be clear, and the focus order should stay logical whether the bar is horizontal or vertical.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.