COMPONENTS

Side Panel

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

side-panel-intro
side-panel-anatomy
  1. Header
  2. Header Title
  3. Collapse Button
  4. Main Page Container
  5. Side Panel Container
Side Panel headers can be with or without a title.
side-panel-headers

Side Panel can positioned on the left or right of the page.

side-panel-position

Side panels can be collapsed manually by the user and can collapse automatically at a specified breakpoint.

side-panel-behaviors

Side Panel can hold other components including Tree, Steps and List Group.

side-panel-tree
side-panel-steps
side-panel-list-group

To show a navigational menu with icons use Side Panel Menu.

side-panel-menu