Skip to main content
BEEQ Side Menu component overview

Side Menu overview

The side menu is a vertical navigation element that sits alongside a page or application layout. It acts as a central hub for accessing sections, features, and functionality.
Use bq-side-menu-item inside bq-side-menu; side menu items rely on the parent menu to manage collapsed and selected states.

​
When to use

Use side menus when
  • A website or application has extensive content or multiple hierarchical levels
  • A compact and organized navigation system is necessary
  • Users need persistent access to primary sections while they work

Do not use side menus when
  • The menu reduces the visibility of primary content
  • The interface is focused on reading or content consumption
  • The layout is too narrow to support persistent navigation

​
Patterns

Default view

Navigation items remain visible while users scroll. This gives people a persistent representation of the product structure.

Collapsible view

The collapsible view reduces the menu to a compact rail. Use it when space is constrained or when users need more room for content.
For grid sizes M to XS, applicable to viewports of 768 pixels and below, display the side menu in collapsed mode.

​
Anatomy

BEEQ Side Menu component anatomy

Side Menu anatomy

A side menu is composed of a container, selected item state, navigation items, and optional logo and footer areas.

​
Design guidelines

​
Usage

​
Default

The default side menu is a versatile container for organizing and displaying navigation elements. Use it as the foundation for structured and intuitive navigation layouts.

​
Side menu item behavior

​
Side menu item states

bq-side-menu-item is a child component, not a standalone navigation pattern. Use it only inside bq-side-menu. Within a side menu, items support default, active, hover, focus, disabled, and with-counter states.

​
Options

​
Appearance

Use the appearance attribute to align the side menu with your application’s visual language.

​
Default

The default appearance is a neutral style that works well in most contexts. It pairs with a light or dark background and uses color accents for active and hover states.

​
Brand

The brand appearance highlight the brand color as the background of the side menu. This creates a strong visual presence and reinforces brand identity.

​
Inverse

The inverse appearance is designed for use as the opposite of the BEEQ mode of the application. For example, if your app uses bq-mode="light", the inverse side menu will use the dark appearance, and vice versa.

​
Size

The side menu supports two sizes: medium (default) and small. The small size is a version of the side menu that shows only icons, hiding the text labels. Use the size attribute/property to switch between the two sizes.
When using the medium size, there’s no need to specify the size attribute, as it is the default. Default values are not required to be set explicitly, but you can add size="medium" for clarity if desired.
Use the footer slot for supplementary actions, links, or information at the bottom of the menu.

​
Collapse

Use collapse to create a compact side menu. Collapsed menus show icons and hide labels, but the logo can be customized to show or hide based on the collapsed state. The menu items will display their label content in a tooltip on hover when the menu is collapsed. Wire your app control to the side menu state so the button can expand and collapse the menu. Keep the icon-only button label in sync with the current state.

​
Best practices

DoChoose navigation titles that clearly communicate where each item leads.

Don’tAvoid arbitrary titles that hide the destination or force people to guess.

DoKeep navigation labels concise by removing words that do not add meaning.

Don’tAvoid long labels that wrap, truncate poorly, or reduce scanability.

DoUse sentence case for navigation items so labels read naturally.

Don’tAvoid title case or all caps when they make navigation harder to scan.

DoValidate icon meaning with users when icons are needed for collapsed navigation.

Don’tDo not rely on icons alone unless the destination remains understandable.

​
Accessibility

The side menu renders its root surface as an <aside> and places menu items inside a <nav>. Each bq-side-menu-item renders as a focusable button with role="menuitem", and the disabled property maps to aria-disabled="true" and tabindex="-1".
  • Landmark context - include semantic heading text in the logo slot to communicate the menu purpose and where its content begins.
  • Collapsed state - communicate the expanded or collapsed state through the surrounding layout control when you add one.
  • Icons - validate icon meaning when collapsed navigation relies on icons to identify destinations.
  • Labels - use unique labels that make sense without additional context. The item text feeds the collapsed tooltip content.
  • Keyboard navigation - side menu items support focus, click, Enter, and Space interaction through the underlying button.

​
API reference

​
Properties

​
bq-side-menu

​
bq-side-menu-item

​
Slots

​
bq-side-menu

​
bq-side-menu-item

​
Shadow parts

​
bq-side-menu

​
bq-side-menu-item

​
Events

​
bq-side-menu

​
bq-side-menu-item

  • In React, prefix events with on: onBqSelect, onBqCollapse, onBqClick.
  • In Angular, use event binding syntax: (bqSelect), (bqCollapse), (bqClick).
  • In Vue, use the @ shorthand: @bqSelect, @bqCollapse, @bqClick.

​
Methods

​
CSS custom properties

​
bq-side-menu

​
bq-side-menu-item

Learn more about styling with shadow parts and CSS custom properties.

​
Resources

Interactive playground

Explore all side menu configurations in Storybook

Source code

View the component source on GitHub