Circular Navigation
Navigation for digital circular content.
Examples
<nav class="circular-toolbar toolbar" aria-label="Circular page navigation.">
<div class="toolbar-body">
<div class="toolbar-group btn-group d-none d-md-inline-flex" role="group" aria-label="Circular Format Navigation">
<a href="#?format=online" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Online Format">
<i class="fa-solid fa-table-cells"></i><span class="sr-only">Online View</span>
</a>
<a href="#?format=newsprint" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Newsprint Format">
<i class="fa-solid fa-book-open"></i><span class="sr-only">Newsprint View</span>
</a>
</div>
<div class="toolbar-group btn-group" role="group" aria-label="Circular Page Navigation">
<a href="/circulars/Page/3/Insert/1/190326_NCM//" class="btn btn-light">
<i class="fa-solid fa-angle-left"></i><span class="sr-only">Previous Page</span>
</a>
<div class="dropdown btn-group" role="group">
<button class="btn btn-primary dropdown-toggle" type="button" id="circular-pages-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-none d-sm-inline">Page 1 of 9</span>
<span class="d-inline d-sm-none">Pg. 1</span>
</button>
<div class="dropdown-menu" aria-labelledby="circular-pages-button">
<a class="circular-toolbar-page-title dropdown-item" href="/circulars/Page/1/Base/1/190326_NCM//"><strong>Weekly Specials</strong><br><small>Ends 10/10/2019</small></a>
<a class="dropdown-item active" href="/circulars/Page/1/Base/1/190326_NCM//">Page 1 of 9</a>
<a class="dropdown-item " href="/circulars/Page/2/Base/1/190326_NCM//">Page 2 of 9</a>
<a class="dropdown-item " href="/circulars/Page/3/Base/1/190326_NCM//">Page 3 of 9</a>
<a class="dropdown-item " href="/circulars/Page/4/Base/1/190326_NCM//">Page 4 of 9</a>
<a class="dropdown-item " href="/circulars/Page/5/Base/1/190326_NCM//">Page 5 of 9</a>
<a class="dropdown-item " href="/circulars/Page/6/Base/1/190326_NCM//">Page 6 of 9</a>
<div class="dropdown-divider"></div>
<a class="circular-toolbar-page-title dropdown-item" href="/circulars/Page/1/Insert/1/190326_NCM//"><strong>Web Specials</strong><br><small class="text-danger">Starts 10/10/2019</small></a>
<a class="dropdown-item " href="/circulars/Page/1/Insert/1/190326_NCM//">Page 7 of 9</a>
<a class="dropdown-item " href="/circulars/Page/2/Insert/1/190326_NCM//">Page 8 of 9</a>
<a class="dropdown-item " href="/circulars/Page/3/Insert/1/190326_NCM//">Page 9 of 9</a>
</div>
</div>
<a href="/circulars/Page/2/Base/1/190326_NCM//" class="btn btn-light">
<i class="fa-solid fa-angle-right"></i><span class="sr-only">Next Page</span>
</a>
</div>
<div class="toolbar-group btn-group" role="group" aria-label="Circular Departments Navigation">
<div class="dropdown btn-group" role="group">
<button class="btn btn-light dropdown-toggle" type="button" id="circular-departments-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-none d-lg-inline">Departments</span>
<span class="d-inline d-lg-none">Depts</span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-md-left" aria-labelledby="circular-departments-button">
<li><a class="dropdown-item " href="/circulars/department/Bakery/">Bakery</a></li>
<li><a class="dropdown-item " href="/circulars/department/Beer_and_Wine/">Beer and Wine</a></li>
<li><a class="dropdown-item " href="/circulars/department/Dairy/">Dairy</a></li>
<li><a class="dropdown-item " href="/circulars/department/Deli/">Deli</a></li>
<li><a class="dropdown-item " href="/circulars/department/Floral/">Floral</a></li>
<li><a class="dropdown-item " href="/circulars/department/Frozen/">Frozen</a></li>
<li><a class="dropdown-item " href="/circulars/department/General_Merchandise/">General Merchandise</a></li>
<li><a class="dropdown-item " href="/circulars/department/Grocery/">Grocery</a></li>
<li><a class="dropdown-item " href="/circulars/department/Health_and_Beauty_Care/">Health and Beauty Care</a></li>
<li><a class="dropdown-item " href="/circulars/department/Meat_-_Fresh/">Meat - Fresh</a></li>
<li><a class="dropdown-item " href="/circulars/department/Meat_-_Packaged/">Meat - Packaged</a></li>
<li><a class="dropdown-item " href="/circulars/department/Meat_-_Seafood/">Meat - Seafood</a></li>
<li><a class="dropdown-item " href="/circulars/department/Pets/">Pets</a></li>
<li><a class="dropdown-item " href="/circulars/department/Produce/">Produce</a></li>
</ul>
</div>
</div>
<div class="d-none d-lg-inline-flex">
<form class="search-form" action="/circulars/search/" method="post" data-search="live"data-target="#search-results" data-hide=".search-hidden">
<input type="hidden" name="date" value="">
<div class="input-group mb-3">
<input type="text" class="search-from-search-text form-control" name="search" value="" placeholder="Search" aria-label="Enter text to search circulars." aria-describedby="search-button">
<button class="btn btn-primary" type="button" id="search-button"><i class="fa-solid fa-search"></i><span class="sr-only">Search Circular</span></button>
</div>
</form>
</div>
<div class="d-inline-flex d-lg-none">
<form class="search-form" action="/circulars/search/" method="post" data-search="live"data-target="#search-results" data-hide=".search-hidden">
<div class="input-group mb-3">
<input type="text" class="search-from-search-text form-control" name="search" value="" placeholder="Search" aria-label="Enter text to search circulars." aria-describedby="search-button">
<button class="btn btn-primary" type="button" id="search-button"><i class="fa-solid fa-search"></i><span class="sr-only">Search Circular</span></button>
</div>
</form>
</div>
<div class="toolbar-group ml-auto d-none d-md-inline-flex">
<a href="#" class="toolbar-text-item site-aside-slider-toggle"><strong class="d-none d-lg-inline"><span class="d-none d-xl-inline">Shopping </span>List</strong> <i class="icon-shopping-list"></i></a>
</div>
</div>
</nav>
<section id="search-results"></section>