Toolbars

A horizontal bar for webapps which contains the application title and actions.

Reference: https://getbootstrap.com/docs/3.3/components/#btn-groups-toolbar

Custom component

Toolbars are a custom GEL component.

Basic

Simple, expandable toolbar that can be fixed, either to the top or to the bottom of the page's body.

Fixed positioning

Attach the toolbar to the top of the body by adding the .toolbar-fixed-top class.

Attach the toolbar to the bottom of the body by adding the .toolbar-fixed-bottom class.

Document margins

When using the .toolbar-fixed-top and .toolbar-fixed-bottom variants, the document body must have a 60px margin set for the top and bottom respectively.
  • Toolbar

Primary Action

Toolbar controls for opening (hamburger) menu, closing toolbar, and going back to previous page.

  • Toolbar (with menu icon)

  • Toolbar (with close icon)

  • Toolbar (with back icon)

Inputs

Menus and controls such as fields for entering search terms.

  • Toolbar

Sizes

Three sizes are available: regular, medium, and large.

Flat Variant

A variation of the Basic toolbar element, which replaces reversed text against a black background with dark text against a light background.

  • Toolbar
Third-party Content Disclaimer