Bar enums

Quickly manage the layout and behavior of the Bar component.

Use bar enums to choose between horizontal or vertical navigation, and to control how the bar collapses on smaller screens.

How it works

Set BarMode to choose the overall layout, then pair it with BarCollapseMode and BarTogglerMode to define collapse behavior and toggler styling.

Examples

  • BarMode.Horizontal for a classic top navigation bar.
  • BarCollapseMode.Small to keep icons visible when collapsed.
  • BarTogglerMode.Popout for vertical bars with a popout toggle.

Reference

BarCollapseMode

Defines how the bar will be collapsed.

  • BarCollapseMode.Hide Bar will be hidden completely when collapsed.
  • BarCollapseMode.Small Bar will be collapsed into smaller version with icons.

BarMode

Bar orientation and menu display.

  • BarMode.Horizontal Horizontal navbar with dropdown menus.
  • BarMode.VerticalPopout Vertical navbar with pop-out menus.
  • BarMode.VerticalInline Vertical navbar with inline dropdown menus.
  • BarMode.VerticalSmall Small vertical navbar with pop-out menus.

BarTogglerMode

Defines the look and position of the bar toggler.

  • BarTogglerMode.Normal The standard inline bar toggler. Supported by Horizontal and Vertical BarModes.
  • BarTogglerMode.Popout A popout style bar toggler. Supported only on Vertical BarModes.
On this page