11 - Navigation

11.1 - Top-nav

Requires javascript

The primary part of the top-nav is global across all products. Some elements require javascript to work properly. See documentation for db.libs.topnav.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.vi.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
</header>

11.1.1 - Search

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
</header>

11.1.2 - Navigation

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </nav>
  </div>
</header>

11.1.3 - Dropdown

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

11.1.4 - Buttons

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" class="button light small"><span class="icon-Userfemale"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Share"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Settings"></span></a></li>
      </ul>
    </div>
  </div>
</header>

11.1.5 - User login

Global login. Note that the template for the login is rendered in the client in the placeholder #js-user.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" data-dropdown="js-user" class="button light small">Logg inn</a></li>
      </ul>
    </div>
  </div>
  <div id="js-user" data-dropdown-content class="f-dropdown small content user-login"></div>
</header>

11.1.7 - Navigation small screens

(Only visible on small viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>

11.1.8 - In app

(Only visible on small viewports) Adding is-app will hide the primary navigation.

Demo

<a class="button" onclick="$('#top-navigation-inapp-test').topnav('toggleSmallNavigation'); return false;">Demo</a>
<header id="top-navigation-inapp-test" class="top-nav is-app" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">Meny</a>
  </div>
</header>

11.2 - Secondary

Requires javascript

The secondary navigation should be contextual and should reveal links and information that is more relevant to the section or service.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <h1>
      <a>
        <div class="section-icon tiny" style="background-color: rgb(140, 174, 45);">
          <span class="icon-Lab"></span>
        </div>
        Section name
      </a>
    </h1>
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.2.1 - Secondary dropdown

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dinside.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <h1>
      <a>
        <div class="section-icon tiny" style="background-color: rgb(140, 174, 45);">
          <span class="icon-Lab"></span>
        </div>
        Section name
      </a>
    </h1>
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li class="has-dropdown">
          <a data-dropdown="drop5">Item 2</a>
          <ul id="drop5" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a data-dropdown="drop6">Item 3</a>
          <ul id="drop6" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.3 - Page header

.darkblue

Dark blue

.teal

Teal

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.vi.no.no" title="Forsiden">
         <img class="logo" src="/assets/styleguide/vi-logo-light.svg" data-pin-nopin="true">
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <h2 class="title {$modifiers}"><a href="#">Something for nothing</a></h2>
  </div>
</header>

11.4 - Tabs

Requires javascript

Tab 1
Tab 2
Tab 3
Tab 4

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>

<ul class="tabs expand-3" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
</ul>

11.5 - Pagination

<ul class="pagination">
  <li class="arrow unavailable"><a href="" class="icon-Arrow-alt-left"></a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="" class="icon-Arrow-alt-right"></a></li>
</ul>

11.6 - Side nav

<ul class="side-nav">
  <li class="heading">Section</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#" class="active">Link 5</a></li>
</ul>