Dealogic Styleguide

section menu

Navigation (Bottom)

Bottom Navigation Controller represents a list of links that either take the user to another page or section of an application.

Examples

<div class="dl-bottom-navigation">
  <ul>
    <li>
      <a href="#" class="selected">
        <dl-icon name="chart-bar"></dl-icon>
        <div>MyReports</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="events-institution"></dl-icon>
        <div>Clients</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="events-cal"></dl-icon>
        <div>Dealcal</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="doc-generic"></dl-icon>
        <div>MyDocs</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="vc-search"></dl-icon>
        <div>Profiles</div>
      </a>
    </li>
  </ul>
</div>

<div class="dl-bottom-navigation">
  <ul>
    <li>
      <a href="#">
        <dl-icon name="chart-bar"></dl-icon>
        <div>MyReports</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="events-institution"></dl-icon>
        <div>Clients</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="events-cal"></dl-icon>
        <dl-status-badge color="#f73a3b"></dl-status-badge>
        <div>Dealcal</div>
      </a>
    </li>
    <li>
      <a href="#" class="selected">
        <dl-icon name="doc-generic"></dl-icon>
        <dl-status-badge color="#f73a3b"></dl-status-badge>
        <div>MyDocs</div>
      </a>
    </li>
    <li>
      <a href="#">
        <dl-icon name="vc-search"></dl-icon>
        <div>Profiles</div>
      </a>
    </li>
  </ul>
</div>