COMPONENTS

Side Panel Menu

Side Panel Menu is a vertical navigational menu that can be added to the Side Panel.

View GSUI Toolkit Documentation (Internal Only)
View in Figma (Internal Only)
side-panel-menu-intro
Anatomy
side-panel-menu-anatomy
  1. Primary menu item
  2. Notification badge
  3. Secondary menu item
Appearance
Badges
Menu items can have numberical notification badges. They are displayed along the right edge side in expanded state and as a badge on the icon in collapsed state.
side-panel-menu-anatomy
Behaviors
States

Menu items have five possible states — enabled, hover, focus, selected, disabled.

side-panel-menu-states
Expansion

Side panel menus can be expanded or collapsed. In the collapsed state, primary menu items are displayed as icons.

side-panel-menu-expansion
Secondary Menus

Secondary menus are presented inline in the expanded state and as a flyout for the collapsed state.

side-panel-menu-secondary-meus
Related Content

Side Panel

Side Panel is a collapsible vertical container used to display related information or navigation.

Badge

A badge is a highly visual way to draw attention to content.

Terms of UseGive FeedbackRegulatory DisclosuresPrivacy and CookiesSecurity