Titlebar

Examples

Titlebars are created using the following structure:

Title

Subtitle

HTML

<div class="hx-heading example-heading">
  <div class="hx-titlebar">
    <div class="hx-titlebar-container">
      <div class="hx-titlebar-header">
        <a class="hx-titlebar-icon" href="#"><div class="hx-logo"></div></a>
        <div class="hx-titlebar-title">Title</div>
        <div class="hx-titlebar-subtitle">Subtitle</div>
        <div class="hx-titlebar-menu-icon-mobile"><i class="fa fa-reorder"></i></div>
      </div>
      <div class="hx-titlebar-menu-icons">
        <div class="hx-titlebar-menu-icons-container">
          <a class="hx-titlebar-menu-icon"><i class="fa fa-tags"></i><span class="hx-titlebar-menu-text">Tags</span></a>
          <a class="hx-titlebar-menu-icon"><i class="fa fa-life-ring"></i><span class="hx-titlebar-menu-text">Help</span></a>
          <a class="hx-titlebar-menu-icon"><i class="fa fa-cog"></i><span class="hx-titlebar-menu-text">Settings</span></a>
          <a class="hx-titlebar-menu-icon"><i class="fa fa-power-off"></i><span class="hx-titlebar-menu-text">Sign out</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="hx-titlebar-linkbar">
    <div class="hx-titlebar-contents">
      <a class="hx-titlebar-link">Link 1</a>
      <a class="hx-titlebar-link">Link 2</a>
      <a class="hx-titlebar-link">Link 3</a>
      <a class="hx-titlebar-link">Link 4</a>
      <a class="hx-titlebar-link">Link 5</a>
    </div>
  </div>
</div>

Titlebars are designed to collapse and hide content automatically for small screens (if you resize the browser window, you will be able to see what it would look like on a mobile).The above definition is a full example of what a titlebar can contain. You can drop certain components of the titlebar if they are not needed. Here is a much simpler titlebar with just a title:

Title

HTML

<div class="hx-heading example-heading">
  <div class="hx-titlebar">
    <div class="hx-titlebar-container">
      <div class="hx-titlebar-header">
        <div class="hx-titlebar-title">Title</div>
      </div>
    </div>
  </div>
</div>

Title

Subtitle

HTML

<div class="hx-heading example-heading">
  <div class="hx-titlebar">
    <div class="hx-titlebar-container">
      <div class="hx-titlebar-header">
        <a class="hx-titlebar-icon" href="#"><div class="hx-logo"></div></a>
        <div class="hx-titlebar-title">Title</div>
        <div class="hx-titlebar-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
</div>

Title

Subtitle

HTML

<div class="hx-heading example-heading">
  <div class="hx-titlebar">
    <div class="hx-titlebar-container">
      <div class="hx-titlebar-header">
        <a class="hx-titlebar-icon" href="#"><div class="hx-logo"></div></a>
        <div class="hx-titlebar-title">Title</div>
        <div class="hx-titlebar-subtitle">Subtitle</div>
        <div class="hx-titlebar-menu-icon-mobile"><i class="fa fa-reorder"></i></div>
      </div>
      <div class="hx-titlebar-menu-icons">
        <div class="hx-titlebar-menu-icons-container">
          <div class="hx-titlebar-menu-icon"><i class="fa fa-tags"></i><span class="hx-titlebar-menu-text">Tags</span></div>
          <div class="hx-titlebar-menu-icon"><i class="fa fa-life-ring"></i><span class="hx-titlebar-menu-text">Help</span></div>
          <div class="hx-titlebar-menu-icon"><i class="fa fa-cog"></i><span class="hx-titlebar-menu-text">Settings</span></div>
          <div class="hx-titlebar-menu-icon"><i class="fa fa-power-off"></i><span class="hx-titlebar-menu-text">Sign out</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

Title

Subtitle

HTML

<div class="hx-heading example-heading">
  <div class="hx-titlebar">
    <div class="hx-titlebar-container">
      <div class="hx-titlebar-header">
        <a class="hx-titlebar-icon" href="#"><div class="hx-logo"></div></a>
        <div class="hx-titlebar-title">Title</div>
        <div class="hx-titlebar-subtitle">Subtitle</div>
        <div class="hx-titlebar-menu-icon-mobile"><i class="fa fa-reorder"></i></div>
      </div>
      <div class="hx-titlebar-menu-icons">
        <div class="hx-titlebar-menu-content"> <!-- New div for other titlebar content -->
          <div class="hx-input-group">
            <input type="text" id="exampleInput">
            <button class="hx-btn hx-positive"><i class="fa fa-search"></i></button>
          </div>
        </div>
        <div class="hx-titlebar-menu-icons-container">
          <a class="hx-titlebar-menu-icon"><i class="fa fa-tags"></i><span class="hx-titlebar-menu-text">Tags</span></a>
          <a class="hx-titlebar-menu-icon"><i class="fa fa-life-ring"></i><span class="hx-titlebar-menu-text">Help</span></a>
          <a class="hx-titlebar-menu-icon"><i class="fa fa-cog"></i><span class="hx-titlebar-menu-text">Settings</span></a>
          <a class="hx-titlebar-menu-icon"><i class="fa fa-power-off"></i><span class="hx-titlebar-menu-text">Sign out</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

Title

Subtitle

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

HTML

<div class="hx-heading example-heading">
  <div class="hx-titlebar">
    <div class="hx-titlebar-container">
      <div class="hx-titlebar-header">
        <a class="hx-titlebar-icon" href="#"><div class="hx-logo"></div></a>
        <div class="hx-titlebar-title">Title</div>
        <div class="hx-titlebar-subtitle">Subtitle</div>
        <div class="hx-titlebar-menu-icon-mobile"><i class="fa fa-reorder"></i></div>
      </div>
    </div>
  </div>
  <div class="hx-titlebar-linkbar">
    <div class="hx-titlebar-contents">
      <div class="hx-titlebar-link">Link 1</div>
      <div class="hx-titlebar-link">Link 2</div>
      <div class="hx-titlebar-link">Link 3</div>
      <div class="hx-titlebar-link">Link 4</div>
      <div class="hx-titlebar-link">Link 5</div>
      <div class="hx-titlebar-link">Link 6</div>
    </div>
  </div>
</div>

HTML

<div id="fluid-titlebar"></div>

JavaScript

hx.select('#fluid-titlebar')
  .add(hx.titleBar({
    title: 'Fluid Titlebar',
    subtitle: 'Subtitle'
  }))

Api

Change Log

Properties

hx.titlebarTitleBar

Provided there is a hx-heading section on the page when hexagon.js loads, hexagon will create a titlebar instance for you, and will store it on this property.

Prototypes

hx.TitleBar

Constructors

hx.TitleBarselectorString / HTMLElement

Constructs a new TitleBar instance

Arguments

selectorString / HTMLElement

The .hx-heading section which contains the titlebar. Normally you would do something like this:

var titlebar = new hx.TitleBar(hx.select('hx-section').node());

Methods

activeselectorString / HTMLElementTitleBar

Sets the active titlebar link, causing the underline to show all the time instead of just when the link is hovered over.

Arguments

selectorString / HTMLElement

The titlebar link to apply the selected class to. Must be a selector that returns a single node (e.g. an ID rather than a class)

Returns

TitleBar

This titlebar for chaining.

activeSelection

Gets the currently active titlebar link.

Returns

Selection

The currently selected titlebar link.

contextClassclassStringTitleBar

Sets the context class for the titlebar, removing any other existing context classes in the process.

Arguments

classString

The context class to give the titlebar - can be one of hx-positive, hx-negative, hx-warning, hx-info. If undefined is supplied the titlebar will return to its normal color scheme.

Returns

TitleBar

This titlebar for chaining.

contextClassString

Gets the context class for the titlebar

Returns

String

The currently set context class.

Functions

hx.titleBaroptionsObject

Arguments

options

The options for the titlebar

Properties

iconClassString

The icon class to use

Default: 'hx-logo'

iconLinkString

The link to add to the icon

Default: '#'

showIconBoolean

Whether to show the icon in the titlebar

Default: true

subtitleString

The subtitle to display

Default: ''

titleString

The title to display in the titlebar

Default: 'Title'

Classes

hx-heading

The titlebar container. The structure must follow this hierarchy to allow the mobile responsiveness to work correctly.

Classes

hx-titlebar

The top part of the titlebar that includes the icon, title, subtitle and any menu icons.

Classes

hx-titlebar-container

The container for all the titlebar contents.

Classes

hx-titlebar-header

The header container that includes the icon, title and subtitle.

Classes

hx-titlebar-iconinfo

hx-titlebar-menu-icon-mobile

The element that is shown on mobile devices to show/hide the titlebar menu icons.

hx-titlebar-subtitle

The element that contains the site subtitle. This element is not required

hx-titlebar-title

The element that contains the page title.

hx-titlebar-menu-icons

An element containing a set of menu icons to perform actions (such as login, preferences etc.)

Classes

hx-titlebar-menu-icons-container

The container for all the menu icons.

Classes

hx-titlebar-menu-icon

The class to give to each menu icon.

Classes

hx-titlebar-menu-text

The class to give to a <span> element inside the menu icon which will display as the tooltip text for the icon.

Extra Classes

hx-info

Gives the titlebar the info color.

hx-negative

Gives the titlebar the negative color.

hx-positive

Gives the titlebar the positive color.

hx-warning

Gives the titlebar the warning color.

hx-titlebar-linkbar

The linkbar that contains any links that will display underneath the titlebar.

Classes

hx-titlebar-contents

The contents of the linkbar

Classes

hx-titlebar-link

The class to give to each link element inside the linkbar contents.

hx-heading-fixed

The class to give to the body to fix the heading to the top of the page.