DAHLIA Pattern Library

Top Bar: Full 

<nav class="top-bar full-width inner--3x" role="navigation">
    <div class="row">
        <ul class="title-area">
            <li class="name">
                <div class="name-logo is-short t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
            </li>
        </ul>
        <section class="top-bar-section">
            <ul class="nav-menu left">
                <li>
                    <a href="/lease-up/listings.html">
          Listings
        </a>
                </li>
                <li>
                    <a href="/lease-up/flags.html">
          Flags
        </a>
                </li>
                <li>
                    <a href="/lease-up/applications.html">
          Applications
        </a>
                </li>
                <li>
                    <a href="/lease-up/lease-up.html">
          Lease Up
        </a>
                </li>
            </ul>

            <ul class="nav-menu right">
                <li>
                    <a href="/pages/get-assistance.html">
          Sign Out
        </a>
                </li>
            </ul>
        </section>
    </div>
</nav>
 
<nav class="top-bar full-width inner--3x" role="navigation">
  <div class="row">
  <ul class="title-area">
    <li class="name">
      <div class="name-logo is-short t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="nav-menu left">
      <li>
        <a href="/lease-up/listings.html">
          Listings
        </a>
      </li>
      <li>
        <a href="/lease-up/flags.html">
          Flags
        </a>
      </li>
      <li>
        <a href="/lease-up/applications.html">
          Applications
        </a>
      </li>
      <li>
        <a href="/lease-up/lease-up.html">
          Lease Up
        </a>
      </li>
    </ul>

    <ul class="nav-menu right">
      <li>
        <a href="/pages/get-assistance.html">
          Sign Out
        </a>
      </li>
    </ul>
  </section>
  </div>
</nav>
 
{
  "menus": {
    "account": [
      {
        "name": "My Dashboard",
        "icon": "profile"
      },
      {
        "name": "My Applications",
        "icon": "application"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "mobile": [
      {
        "name": "Browse Properties",
        "icon": "browse"
      },
      {
        "name": "Get Assistance",
        "icon": "assistance"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "lang": [
      {
        "name": "English",
        "active": true,
        "url": "application-expect.html",
        "selected": true,
        "index": null,
        "id": "panel1"
      },
      {
        "name": "Español",
        "url": "application-expect--es.html",
        "selected": null,
        "index": -1,
        "id": "panel2"
      },
      {
        "name": "中文",
        "chinese": true,
        "url": "application-expect--zh.html",
        "selected": null,
        "index": -1,
        "id": "panel3"
      },
      {
        "name": "Filipino",
        "url": "#",
        "selected": null,
        "index": -1,
        "id": "panel4"
      }
    ]
  }
}

There are no notes for this item.