Dealogic Styleguide

section menu

Navigation (Global)

Global Navigation Controller represents a list of links that either take the user to another page or section of an application. This controller can have a multiple nested layers of navigation presented to the user in dropdown fashion.

A full example can be found here.

Attributes

attribute: type: required? default: description:
client-logo string no  

URL of client logo image
client-link string no  

URL which the client logo needs to link to.
logo-link string no  

URL which the Dealogic logo needs to link to.
page-title string no  

Page title, shown in tablet / mobile view
fixed string no  

The value can be 'top'. In this case the navigation stick to the browser's top and not scrolling down with the content

Slots

name: description:
nav

Main navigation slot. Can be filled with a simple nested unordered list.
settings

Used to populate settings dropdown menu.

Examples

Basic Navigation

Both the Dealogic & Stripe logo linked.

<dl-navigation
  page-title="UIToolkit"
  client-logo="https://stripe.com/img/v3/home/twitter.png"
  client-link="https://stripe.com"
  logo-link="https://dealogic.com">
  <ul slot="nav">
    <li><a href="#">Analytics</a></li>
    <li>
      <a href="#">Strategy</a>
      <ul>
        <li><a href="#">Sub Menu Item</a></li>
        <li>
          <a href="#">Sub Menu Item With A Long Text Over Two Lines</a>
          <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item With A Long Text Over Two Lines</a></li>
            <li><a href="#">Sub Menu Item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Origination</a></li>
    <li><a href="#">MyCortex</a></li>
    <li><a href="">LookUp</a></li>
    <li>
      <a href="#">Example</a>
      <ul>
        <li><a href="#">Sub Menu Item</a></li>
        <li>
          <a href="#">Sub Menu Item With A Long Text Over Two Lines</a>
          <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item With A Long Text Over Two Lines</a></li>
            <li><a href="#">Sub Menu Item</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Menu Item</a>
          <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item With A Long Text Over Two Lines</a></li>
            <li><a href="#">Sub Menu Item</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</dl-navigation>