Menu bar
Extended from Reka UI NavigationMenu
The menu bar offers a horizontal menu of links or menu triggers that can open either a small flyout containing a list of links, or a full-width flyout containing multiple columns of links.
By default, it will show a semi-transparent overlay when a menu flyout is open. The overlay assumes the menu is positioned at the top of the viewport. If you need to use the menu in another position (i.e. mid-page), be sure to disable the overlay.
Basic example
This shows the default behavior, except disables the semi-transparent overlay (which is on by default) so the example can be more easily shown within the flow of this page.
Flyout alignment
This shows the recommended flyout alignment for menus. The first flyout will position at the left edge of its trigger, the last flyout at the right edge of its trigger, and all others will be centered. You can control the alignment of each menu flyout as necessary.
Full width
The full width menu is best used with the semi-transparent overlay left on, which requires that the menu bar be at the top of the page. Scroll to the top of this page to see an example of a full width menu.
Links should be displayed in columns when using the full width menu. The columns are responsive and will show one per row on mobile, two per row starting at the md breakpoint, three at lg breakpoint, and four at xl breakpoint and above. Keep in mind, though, that the menu bar is primarily meant for use at lg breakpoint and above, depending on how many menu items it needs to have. For smaller breakpoints, consider using the mobile nav.
EsMenuBar props
All props except the ones below will be passed through to Reka UI's NavigationMenuRoot component.
- Name
class
- Type
string
- Default
''
- Description
- The CSS class name(s) to apply to the nav container element. Prevents the CSS classes from being passed into Reka UI's NavigationMenuRoot.
- Name
full-width
- Type
boolean
- Default
false
- Description
- If true, EsMenuBarFlyout will take up the full width of the browser, have a branded color bar at the bottom, and expect to have EsMenuBarFlyoutColumn components as children. If false, EsMenuBarFlyout will be 300px wide and expect to have EsMenuBarFlyoutLink components as children.
- Name
height
- Type
number
- Default
40
- Description
- The height of the menu bar in pixels.
- Name
show-overlay-when-open
- Type
boolean
- Default
true
- Description
- If true, the menu bar will assume it's positioned at the top of the viewport and when a menu is open, will lock page scrolling and show a semi-transparent overlay. If false, no overlay will be shown and the menu can be positioned anywhere on the page.
EsMenuBarLink props
This component will generate a link at the top level of the menu bar.
- Name
href
- Type
string
- Default
- n/a
- Description
- Required. The URL destination of the link.
- Name
target
- Type
string
- Default
'_self'
- Description
- Indicates whether the link should open in a new window.
EsMenuBarFlyout props
- Name
align
- Type
'start' or 'center' or 'end'
- Default
'center'
- Description
- Only applies in menu bars that are not full width. Controls the horizontal alignment of the flyout relative to its trigger. 'start' will align the flyout's left edge to the trigger's left edge. 'end' will align the flyout's right edge to the trigger's right edge. 'center' will center the flyout relative to the trigger.
EsMenuBarFlyoutColumn props
- Name
heading
- Type
string
- Default
''
- Description
- The column heading.
EsMenuBarFlyoutLink props
This component will generate a link within a flyout column in a full width menu.
- Name
href
- Type
string
- Default
- n/a
- Description
- Required. The URL destination of the link.
- Name
name
- Type
string
- Default
- n/a
- Description
- Required. The link text.
- Name
target
- Type
string
- Default
'_self'
- Description
- Indicates whether the link should open in a new window.