Sections

Navbars

Available on all pages, this pattern allows visitors to navigate your Help Center.

Anonymous

The following examples represent the state before a visitor has signed in.

  • <header class="header bg-white border-bottom" id="header">
      <nav class="navbar navbar-light font-size-md container" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
        {{#link 'help_center' class='navbar-brand mr-auto'}}
          <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
        <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
          <span></span>
        </button>
        <ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
          {{#if help_center.community_enabled}}
            <li class="nav-item">
              {{link 'community' class='nav-link' role='menuitem'}}
            </li>
          {{/if}}
          <li class="nav-item">
            {{link 'new_request' class='nav-link' role='menuitem'}}
          </li>
          {{#unless signed_in}}
            <li class="nav-item">
              {{#link "sign_in"}}
                {{t 'sign_in' role='menuitem'}}
              {{/link}}
            </li>
          {{/unless}}
        </ul>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
              {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
              <span class="nav-link pl-2 pr-0 hidden md:inline-block">
                {{user_name}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" class='dropdown-item' role="menuitem"}}
              {{my_profile class='dropdown-item' role="menuitem"}}
              {{change_password class='dropdown-item' role="menuitem"}}
              {{link "sign_out" class='dropdown-item'  role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </nav>
    </header>

Navbar links can be centered using margin utilities. The example below moves the Sign In link outside of the .nav-menu element, which results in it being visible in the header even on small screen sizes.

Use .flex-1 on the .nav-menu element to have it occupy as much space as possible, resulting in the navigation links being displayed on the left-hand side.

Signed in

By default, the user dropdown menu is outside of the .nav-menu element, which results in it being visible in the header even on small screen sizes.

An alternative is to hide the user dropdown and display the links within the .nav-menu element on small screen sizes using display utilities.