/../hex/src/navigation/_breadcrumb.scss

The class .breadcrumb will be added to the nav element. If the component is used with a dark background both classes will be added .breadcrumb breadcrumb-reverse

Options
  • .breadcrumb: Main breadcrumb used with light backgrounds
  • .breadcrumb-reverse: Used with dark backgrounds
<nav class="breadcrumb">
  <ol>
    <li><a href="#">First element</a></li>
    <li><a href="#">Second element</a></li>
    <li> Third element</li>
  </ol>
</nav>

<div class="padding-bigger gradient-180-brand type-color-reverse-anchor-reset">
  <nav class="breadcrumb breadcrumb-reverse">
    <ol>
      <li><a href="#">First element</a></li>
      <li><a href="#">Second element</a></li>
      <li> Third element</li>
    </ol>
  </nav>
</div>
/../hex/src/navigation/_footer.scss

Copyright text and social links. This components depends on the Social Icons.

<footer class="footer bg-dark type-color-reverse-anchor-reset">
  <div class="container padding-v-bigger">
    <div class="row collapse-b-desktop">
      <div class="col-3">
        <div class="footer__copyright">
          <h4 class="inverse margin-t-small">
            <img src="/assets/images/logo-white.svg" alt="Bitnami logo"
              class="footer__logo">
          </h4>
          <p>
            <a href="#" class="socialIcon margin-r-small">
              <svg role="img" aria-label="See the Facebook Profile of Bitnami" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <title>facebook</title>
                <circle fill="currentColor" cx="27" cy="27" r="27"/>
                <path d="M23.723 40h5.235V26.89h3.653L33 22.5h-4.042V20c0-1.035.208-1.444 1.209-1.444H33V14h-3.625c-3.896 0-5.652 1.716-5.652 5v3.5H21v4.444h2.723V40z" fill="currentColor"/>
              </svg>
            </a>
            <a href="#" class="socialIcon margin-r-small">
              <svg role="img" aria-label="See the Twitter Profile of Bitnami" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <title>twitter</title>
                <circle fill="currentColor" cx="27" cy="27" r="27"/>
                <path d="M14 35.618A15.166 15.166 0 0 0 22.177 38c9.904 0 15.498-8.313 15.162-15.77A10.761 10.761 0 0 0 40 19.485c-.957.422-1.985.707-3.063.834a5.314 5.314 0 0 0 2.344-2.932 10.729 10.729 0 0 1-3.386 1.287A5.344 5.344 0 0 0 32 17c-3.442 0-5.973 3.193-5.195 6.51a15.17 15.17 0 0 1-10.994-5.54 5.288 5.288 0 0 0 1.65 7.078 5.33 5.33 0 0 1-2.417-.663c-.057 2.456 1.714 4.753 4.279 5.265-.751.204-1.573.25-2.408.09a5.33 5.33 0 0 0 4.982 3.683A10.767 10.767 0 0 1 14 35.618" fill="currentColor"/>
              </svg>
            </a>
            <a href="#" class="socialIcon margin-r-small">
              <svg role="img" aria-label="See the Github Profile of Bitnami" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <title>github</title>
                <circle fill="currentColor" cx="27" cy="27" r="27"/>
                <path d="M27.5 14C20.044 14 14 19.968 14 27.33c0 5.888 3.868 10.885 9.233 12.647.675.122.921-.289.921-.642 0-.317-.011-1.155-.018-2.268-3.755.806-4.547-1.786-4.547-1.786-.614-1.54-1.5-1.95-1.5-1.95-1.225-.827.094-.81.094-.81 1.355.094 2.067 1.373 2.067 1.373 1.204 2.038 3.16 1.45 3.93 1.108.122-.861.47-1.449.856-1.782-2.997-.336-6.149-1.48-6.149-6.588 0-1.455.526-2.644 1.39-3.576-.14-.337-.603-1.693.132-3.527 0 0 1.133-.36 3.712 1.366a13.085 13.085 0 0 1 3.38-.449c1.146.005 2.301.153 3.38.449 2.577-1.725 3.708-1.366 3.708-1.366.737 1.834.273 3.19.134 3.527.865.932 1.388 2.121 1.388 3.576 0 5.12-3.156 6.248-6.164 6.578.485.411.917 1.225.917 2.468 0 1.782-.017 3.22-.017 3.657 0 .356.243.77.928.64C37.135 38.21 41 33.218 41 27.33 41 19.968 34.955 14 27.5 14" fill="currentColor"/>
              </svg>
            </a>
            <a href="#" class="socialIcon margin-r-small">
              <svg role="img" aria-label="See the Youtube Profile of Bitnami" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <title>youtube</title>
                <circle fill="currentColor" cx="27" cy="27" r="27"/>
                <path d="M24.2 31.286v-8.572L31.474 27 24.2 31.286zm16.215-11.163a3.543 3.543 0 0 0-2.476-2.526C35.756 17 27 17 27 17s-8.755 0-10.938.597a3.544 3.544 0 0 0-2.476 2.526C13 22.351 13 27 13 27s0 4.649.585 6.877a3.543 3.543 0 0 0 2.476 2.526C18.244 37 27 37 27 37s8.756 0 10.94-.597a3.543 3.543 0 0 0 2.475-2.526C41 31.649 41 27 41 27s0-4.649-.585-6.877z" fill="currentColor"/>
              </svg>
            </a>
            <a href="#" class="socialIcon">
              <svg role="img" aria-label="See the LinkedIn Profile of Bitnami" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <title>linkedin</title>
                <circle fill="currentColor" cx="27" cy="27" r="27"/>
                <path d="M20.6 17.8c0 1.542-1.253 2.8-2.8 2.8S15 19.35 15 17.8c0-1.542 1.253-2.8 2.8-2.8s2.8 1.258 2.8 2.8zm0 5.2h-4.8v16h4.8V23zm7.889-.303H23.8V39h4.689v-8.553c0-2.295 1.024-3.656 2.979-3.656 1.802 0 2.666 1.309 2.666 3.656V39H39V28.676c0-4.364-2.395-6.476-5.755-6.476-3.351 0-4.765 2.697-4.765 2.697v-2.2h.009z" fill="currentColor"/>
              </svg>
            </a>
          </p>
          <p class="type-color-gray type-small">
            © Bitnami 2018 | All Rights Reserved.
          </p>
        </div>
      </div>
      <div class="col-9">
        <div class="row collapse-3-on-phone-land collapse-2-on-phone">
          <div class="col-2">
            <h3>Products</h3>
            <ul class="remove-style padding-reset">
              <li><a href="#">Application Catalog</a></li>
              <li><a href="#">Stacksmith</a></li>
            </ul>
          </div>
          <div class="col-2">
            <h3>Solutions</h3>
            <ul class="remove-style padding-reset">
              <li><a href="#">Application Packaging</a></li>
              <li><a href="#">Cloud Migration</a></li>
            </ul>
          </div>
          <div class="col-2">
            <h3>Partners</h3>
            <ul class="remove-style padding-reset">
              <li><a href="#">Cloud</a></li>
              <li><a href="#">Software</a></li>
              <li><a href="#">Technology</a></li>
              <li><a href="#">SI / Reseller</a></li>
            </ul>
          </div>
          <div class="col-2">
            <h3><a href="#">About Us</a></h3>
            <ul class="remove-style padding-reset">
              <li><a href="#">Blog</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Customers</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div class="col-2">
            <h3>Legal</h3>
            <ul class="remove-style padding-reset">
              <li><a href="#">Customer Agreement</a></li>
              <li><a href="#">Privacy</a></li>
            </ul>
          </div>
          <div class="col-2">
            <h3>Support</h3>
            <ul class="remove-style padding-reset">
              <li><a href="#">Docs</a></li>
              <li><a href="#">Forum</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
/../hex/src/navigation/_header.scss

Main navigation header for the application. It includes the logo, menu and user menu if it's required. This navigation supports a one level submenu per item.

Structure
  • .header: Base container. It doesn't define any background, you have to do it in an upper container.
  • .header__logo: Logo of the application
  • .header__nav: Navigation container
  • .header__nav__hamburguer: Hamburguer icon for mobile navigation
  • .header__nav__menu: First level menu. It includes a list of navigation elements
  • .header__nav__menu__item: Links to the different sections. They can include a submenu
  • .header__nav__menu__item-active: Visually, set an element as active
  • .header__nav__submenu: Submenu container. It belongs to a first level menu item
  • .header__nav__user: User information container
Responsive

Below the phone landscape breakpoint, the menu is collapsed and the hamburguer icon is showed. When users click on the hamburguer icon, the menu is showed and they can interact with submenu elements. The user information is placed at the bottom of the mobile menu.

Accesibility

The key of accesibility in complex navigations is to use correctly the role, tabindex, aria-label, aria-haspopup and aria-expanded attributes. These attributes give a hint to users about the current status of the navigation.

The role of links (anchors) must be set to menuitem. If they include a submenu, the aria-haspopup property needs to be true and the role of the submenu must be menu. Also, when the user is hover the link (desktop) or click on it (mobile), the submenu is showed. To notify users about this change, we use the aria-expanded attribute.

The last attribute is tabindex. This property indicates the browser what's the next element that should be focus when users press the tab key. Check references to find more information about this property and its values.

References:

<div class="gradient-135-brand type-color-reverse type-color-reverse-anchor-reset">
  <div class="container">
    <header class="header">
      <div class="header__logo">
        <a>
          <img src="/assets/images/logo-white.svg" alt="Bitnami Logo" />
        </a>
      </div>
      <nav class="header__nav">
        <button class="header__nav__hamburguer" aria-label="Menu" aria-haspopup="true" aria-expanded="false">
          <div></div>
          <div></div>
          <div></div>
        </button>
        <ul class="header__nav__menu" role="menubar">
          <li>
            <a class="header__nav__menu__item header__nav__menu__item-active" role="menuitem"
              aria-haspopup="true" aria-expanded="false" href="#" tabindex="0">
              Products
            </a>
            <ul role="menu" aria-label="Products" class="header__nav__submenu">
              <li role="none">
                <a role="menuitem" href="#">App Catalog</a>
              </li>
              <li role="none">
                <a role="menuitem" href="#">Stacksmith</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="header__nav__menu__item" role="menuitem" aria-haspopup="true"
              aria-expanded="false" tabindex="0" href="#">
              Solutions
            </a>
            <ul role="menu" aria-label="Solutions" class="header__nav__submenu">
              <li role="none">
                <a role="menuitem" href="#">App Packaging</a>
              </li>
              <li role="none">
                <a role="menuitem" href="#">Cloud Migration</a>
              </li>
              <li role="none">
                <a role="menuitem" href="#">Kubernetes</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="header__nav__menu__item" role="menuitem" tabindex="0" href="#">Partners</a>
          </li>
          <li>
            <a class="header__nav__menu__item" role="menuitem" tabindex="0" href="#">About Us</a>
          </li>
          <li>
            <a class="header__nav__menu__item" role="menuitem" tabindex="0" href="#">Support</a>
          </li>
          <li>
            <a class="header__nav__menu__item" role="menuitem" tabindex="0" href="#">Blog</a>
          </li>
        </ul>
        <div class="header__nav__user">
          <a class="button button-action button-small">Console</a>
          <a class="type-color-light margin-l-big margin-r-normal">My Account</a>
          <a title="Sign Out" class="type-color-light margin-l-normal">Sign Out</a>
        </div>
      </nav>
    </header>
  </div>
</div>

<div style="height: 200px;"></div>

Hero

/../hex/src/navigation/_hero.scss

The hero component will be used as a header for pages. It will include the following structure.

Structure
  • .hero: The main container
  • .hero__title: The title
  • .hero__subtitle: The subtitle
  • .subhero: Any content after the header. Usually will be just text and sometimes one CTA button
  • .subhero__content: Content of the subhero
  • .subhero__content-big: Bigger container, useful for longer texts and headers.

Bitnami Application Catalog

Ready-to-run Applications and Development Environments

Trusted to deploy over 1 million applications per month

Bitnami is the leader in application packaging providing the largest catalog of click to deploy applications and development stacks. Quickly and easily launch your favorites on your own servers or deploy to every major cloud environment. Choose from local installers, single VMs, multi-tier VMs, container images or Kubernetes Helm charts.

Watch Now
<section class="hero type-color-reverse">
  <div class="container margin-v-huge">
    <section class="hero__content">
      <h1 class="hero__title">Bitnami Application Catalog</h1>
      <p class="hero__subtitle">Ready-to-run Applications and Development Environments</p>
    </section>
  </div>
</section>
<section class="subhero">
  <div class="container">
    <div class="subhero__content subhero__content">
      <h2>Trusted to deploy over 1 million applications per month</h2>
      <p>
        Bitnami is the leader in application packaging providing the largest catalog of click to
        deploy applications and development stacks. Quickly and easily launch your favorites on
        your own servers or deploy to every major cloud environment. Choose from local installers,
        single VMs, multi-tier VMs, container images or Kubernetes Helm charts.
      </p>
      <a href="#" class="button button-action">Watch Now</a>
    </div>
  </div>
</section>

Pagination

/../hex/src/navigation/_pagination.scss

Define an accessible pagination.

See http://www.a11ymatters.com/pattern/pagination/.

<nav class="pagination" role="navigation" aria-label="Pagination Navigation">
  <ul>
    <li class="pagination__current"><a href="#" aria-label="Current Page, Page 1" aria-current="true">1</a></li>
    <li><a href="#" aria-label="Goto Page 2">2</a></li>
    <li><a href="#" aria-label="Goto Page 3">3</a></li>
    <li><a href="#" aria-label="Goto Page 4">4</a></li>
    <li><a href="#" aria-label="Goto Page 5">5</a></li>
    <li><a href="#" aria-label="Goto Page 6">6</a></li>
  </ul>
</nav>