Basic Example
Example of a navigation menu that shows the nav items `spilling` into the dropdown when there is unavailable space.
<nav class="o-adaptive-nav" data-adaptive-nav>
<ul class="o-adaptive-nav__list | o-list-inline | u-space-x-sm u-align-middle" data-adapt-list>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 1</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 2</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 3</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 4</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 5</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 6</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 7</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 8</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 9</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 10</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 11</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 12</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 13</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 14</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 15</a>
</li>
<li class="o-list__item" data-adapt-more>
<button class="c-btn" type="button">
<svg class="c-icon" viewBox="0 0 16 16">
<path d="m3 9c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" />
</svg>
</button>
<div class="c-dropdown c-dropdown--right t-dropdown--default" style="display: none;">
<ul class="o-list-stacked">
</ul>
</div>
</li>
</ul>
</nav>Nav Alignment
Align the adaptive nav, left (default), right and centre.
<nav class="o-adaptive-nav" data-adaptive-nav>
<ul class="o-adaptive-nav__list | o-list-inline | u-space-x-sm u-align-middle" data-adapt-list>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 1</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 2</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 3</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 4</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 5</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 6</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 7</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 8</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 9</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 10</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 11</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 12</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 13</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 14</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 15</a>
</li>
<li class="o-list__item" data-adapt-more>
<button class="c-btn" type="button">
<svg class="c-icon" viewBox="0 0 16 16">
<path d="m3 9c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" />
</svg>
</button>
<div class="c-dropdown c-dropdown--right t-dropdown--default" style="display: none;">
<ul class="o-list-stacked">
</ul>
</div>
</li>
</ul>
</nav><nav class="o-adaptive-nav" data-adaptive-nav>
<ul class="o-adaptive-nav__list o-list-inline | u-space-x-sm u-align-middle u-justify-center" data-adapt-list>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 1</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 2</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 3</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 4</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 5</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 6</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 7</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 8</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 9</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 10</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 11</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 12</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 13</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 14</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 15</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 16</a>
</li>
<li class="o-list__item" data-adapt-more>
<button class="c-btn" type="button">
<svg class="c-icon" viewBox="0 0 16 16">
<path d="m3 9c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" />
</svg>
</button>
<div class="c-dropdown c-dropdown--right t-dropdown--default" style="display: none;">
<ul class="o-list-stacked">
</ul>
</div>
</li>
</ul>
</nav><nav class="o-adaptive-nav" data-adaptive-nav>
<ul class="o-adaptive-nav__list o-list-inline | u-space-x-sm u-align-middle u-justify-end" data-adapt-list>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 1</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 2</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 3</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 4</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 5</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 6</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 7</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 8</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 9</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 10</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 11</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 12</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 13</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 14</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 15</a>
</li>
<li class="o-list__item" data-adapt-item>
<a class="c-link-bare" data-adapt-link>Item 16</a>
</li>
<li class="o-list__item" data-adapt-more>
<button class="c-btn" type="button">
<svg class="c-icon" viewBox="0 0 16 16">
<path d="m3 9c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm5 0c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z" />
</svg>
</button>
<div class="c-dropdown c-dropdown--right t-dropdown--default" style="display: none;">
<ul class="o-list-stacked">
</ul>
</div>
</li>
</ul>
</nav>