--- name: title-bar url: /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

Left Right

Center
Left Right

Center Right
Left Site Name Right Link

Center
Left Right

Center Right

Additional Options

You can easily customize Title-bar with these classes:

.primary = primary color .dark = dark color .left = float content left .right= float content right .center = center content

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 are changed in the settings variables—see below.


Sass Variables

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

$titlebar-center-width: 50%; $titlebar-side-width: (100% - $titlebar-center-width) / 2; $titlebar-background: #eee; $titlebar-color: #000; $titlebar-border: 1px solid #ccc; $titlebar-padding: $global-padding; $titlebar-item-classes: ( center: 'center', left: 'left', right: 'right', title: 'title', );