Navigation Lists
Navigation List
WAI-ARIA Reference: Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. The progress bar is the primary navigation tool for the Cinch Team's large screen devices. [ Source ]
Navigation Lists Sample(s):
Breadcrumb
<nav class="c_breadcrumb-list">
<ul>
<li>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-chevron-right"></use>
</svg>
<a href="#" class="sm:text-1xs md:text-xs">Resources</a>
</li>
<li>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-chevron-right"></use>
</svg>
<a href="#" class="sm:text-1xs md:text-xs">Guides</a>
</li>
<li class="md:block sm:hidden">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-chevron-right"></use>
</svg>
<p class="sm:text-1xs md:text-xs">Infection Control</p>
</li>
</ul>
</nav>Horizontal Navigation List
<div class="c_horizontal-nav">
<nav class="uppercase">
<ul>
<li>
<a href='#'>Career</a>
</li>
<li class="active">
<a href='#'>Ethics/Safety</a>
</li>
<li>
<a href='#'>Tech Innovations</a>
</li>
<li>
<a href='#'>Real Stories</a>
</li>
<li>
<a href='#'>Professional Insurance 101</a>
</li>
</ul>
</nav>
</div>
<p>To make visible in Desktop and hidden in Mobile:</p>
<div class="horizontal-nav md:block sm:hidden">
...
</div>Offsite Nav
To see the offsite nav in action, click the hamburger menu in the header of this page.
<div class="off-canvas">
<div class="toggle-menu absolute cursor-pointer flex items-center bottom-0 right-0 p-3">
<span>Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"
/>
</svg>
</div>
<nav>
<nav>
<ul class="list-none">
<li>
<a href="http://local.itsacinch.com:8081/" class="no-underline text-navy-100 leading-loose">Homepage</a>
</li>
<li>
<a href="http://local.itsacinch.com:8081/insurance/" class="no-underline text-navy-100 leading-loose">Insurance</a>
</li>
<li>
<a href="http://local.itsacinch.com:8081/faq/" class="no-underline text-navy-100 leading-loose">FAQ</a>
</li>
<li>
<a href="http://local.itsacinch.com:8081/about/" class="no-underline text-navy-100 leading-loose">About</a>
</li>
<li>
<a href="http://local.itsacinch.com:8081/support/" class="no-underline text-navy-100 leading-loose">Support</a>
</li>
</ul>
</nav>
</nav>
<div class="border-t border-lt-grey-50 mb-5 pt-8">
<button class="button__secondary sign-in-trigger login-button">Sign In</button>
<button class="button__secondary logout-button">Sign Out</button>
</div>
<div>
<button class="btn btn-primary btn-block">Get A Quote</button>
</div>
</div> Pagination
<nav class="c_pagination-nav md:block sm:hidden">
<ul>
<li class="arrow disabled">
<a href='#'><div><svg class="w-3 h-3 fill-white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-chevron-left"></use></svg></div></a>
</li>
<li class="active">
<a href='#'><div>1</div></a>
</li>
<li>
<a href='#'><div>2</div></a>
</li>
<li>
<a href='#'><div>3</div></a>
</li>
<li >
<a href='#'><div>4</div></a>
</li>
<li>
<a href='#'><div>5</div></a>
</li>
<li class="elipsis">
<a href='#'><div>...</div></a>
</li>
<li class="arrow active">
<a href='#'><div><svg class="w-3 h-3 fill-white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-chevron-right"></use></svg></div></a>
</li>
</ul>
</nav>Progress Bar Nav
Default (Justified)
<nav class="c_toolbar-nav sm:hidden lg:block">
<ul>
<li>
<a href="/quote/about-you/" class="active">About You</a>
</li>
<li>
<a href="/quote/your-business/">Your Business</a>
</li>
<li>
<a href="/quote/your-quote/">Your Quote</a>
</li>
<li>
<a href="/quote/account/">Account</a>
</li>
<li>
<a href="/quote/policy-details/">Policy Details</a>
</li>
<li>
<a href="/quote/payment/">Payment</a>
</li>
</ul>
</nav>Left Aligned (for smaller menus)
<nav class="c_toolbar-nav sm:hidden lg:block">
<ul class="left">
<li>
<a href="/quote/about-you/" class="active">About You</a>
</li>
<li>
<a href="/quote/your-business/">Your Business</a>
</li>
</ul>
</nav>Vertical Navigation List (All Caps)
Resource Topics
<div class="c_vertical-nav">
<h2 class="bg-cyan-100 p-3 text-sm text-white">Resource Topics</h2>
<nav class="uppercase">
<ul>
<li>
<a href='#'>Career</a>
</li>
<li class="active">
<a href='#'>Ethics/Safety</a>
</li>
<li>
<a href='#'>Tech Innovations</a>
</li>
<li>
<a href='#'>Real Stories</a>
</li>
<li>
<a href='#'>Professional Insurance 101</a>
</li>
</ul>
</nav>
</div>
<p>To make hidden in Desktop and visible in Mobile:</p>
<div class="vertical-nav md:hidden sm:visble">
...
</div>Vertical Navigation List (Numbered List)
Guide Contents
<div class="c_vertical-nav">
<h2 class="py-3 text-black sm:text-smallscreen md:text-sm">Guide Contents</h2>
<nav>
<ol>
<li class="active">
<a href='#' class="sm:text-smallscreen md:text-mediumscreen">Overview</a>
</li>
<li>
<a href='#' class="sm:text-smallscreen md:text-mediumscreen">Infection Control in Pediatrics</a>
</li>
<li>
<a href='#' class="sm:text-smallscreen md:text-mediumscreen">Infection Control in the OR</a>
</li>
<li>
<a href='#' class="sm:text-smallscreen md:text-mediumscreen">Infection Control with at Home Care</a>
</li>
<li>
<a href='#' class="sm:text-smallscreen md:text-mediumscreen">Infection Control with Geriatrics</a>
</li>
</ol>
</nav>
</div>
<p>To make hidden in Desktop and visible in Mobile:</p>
<div class="vertical-nav md:hidden sm:visble">
...
</div>
<p>To make visible in Desktop and hidden in Mobile:</p>
<div class="vertical-nav md:block sm:hidden">
...
</div>Two-column Navigation List
<div class="c_list-two-col-nav">
<h4>Professional Services</h4>
<ul>
<li><a href="#">E&O Insurance for Insurance Agents</a></li>
<li><a href="#">E&O Insurance for Insurance Brokers</a></li>
<li><a href="#">E&O Insurance for Real Estate Agents</a></li>
<li><a href="#">E&O Insurance for Real Estate Appraisers</a></li>
</ul>
<h4>Healthcare</h4>
<ul>
<li><a href="#">CRNA Malpractice Insurance</a></li>
<li><a href="#">Nurse Malpractice Insurance</a></li>
<li><a href="#">Nurse Practitioner Insurance</a></li>
<li><a href="#">Occupational Therapist Insurance</a></li>
<li><a href="#">Physical Therapist Malpractice Insurance</a></li>
<li><a href="#">Physician Assistant Insurance</a></li>
<li><a href="#">Registered Nurse</a></li>
<li><a href="#">Student Nurse</a></li>
</ul>
</div>Best Practices
For more information, visit this MDN resource