--- name: title-bar url: /title-bar title: Title Bar ---

Title Bar

A navigational component which can display the current screen the user is on, along with additional controls or menu items.

Title Bar
Left Link Right Link

Basic HTML

You can create a title bar with this basic HTML. Title bars can have left-, right-, and center-aligned sections. You can use one, two, or all three of them in any combination.

Left Right

Center
Left Right

Center Right
Left Site Name Right Link

Center
Left Right

Center Right

Note that in the above examples, the center section is always written first in the HTML, even though it's in the middle. When creating the three sections, always put the HTML tags for them in this order: center, left, then right.


Sass Mixins

Write a title bar with a custom class using our mixins.

.custom-title-bar { // Extend the base selector to get core structural styles @extend %title-bar; // Add visual styles with this mixin @include title-bar-style( $background: #fff, // Background color $color: #000, // Text color $border: 1px solid #000, $padding: 1rem ); }

Note that the names of the left, right, center, and title classes can be changed in the settings variables—see below.


Sass Variables

You can customize with Title Bar with these variables in _settings.scss: