Navigation links that flow inline on narrow screens.
ⓘ Notice
To enforce appropriate semantic HTML, a
<nav>is required.
⚠️ Important
- For list navigation, use
<ul>or<ol>(with<li>children).
Inside this kind of nav, whitespace in client client will not render.- For non-list navigation, i.e. direct
<a>children (no<li>), add classc-nav--no-list.
Inside this kind of nav, whitespace in client client will render.** To remove whitespace with CSS would break or complicate font-size cascade.
| Class | Description |
|---|---|
.c-nav |
changes from list to cloud on narrow screens |
.c-nav--boxed |
adds box around nav |
.c-nav--piped |
adds pipes (“ | “) between links |
.c-nav--no-list |
shows as cloud of links on all screen sizes |
Variants:
| Class | Description |
|---|---|
.c-nav--piped |
|
.c-nav--piped--after |
adds pipes (“ | “) after links (default) |
.c-nav--plain--before |
adds pipes (“ | “) before links |
<dl>
<dt>
Unordered List<br />
<small>
<code>c-nav</code>
</small>
</dt>
<dd>
<nav class="c-nav">
<ul>
<li>
<a href="#alabama" id="alabama">
Alabama
</a>
</li>
<li>
<a href="#alaska" id="alaska">
Alaska
</a>
</li>
<li>
<a href="#arizona" id="arizona">
Arizona
</a>
</li>
<li>
<a href="#arkansas" id="arkansas">
Arkansas
</a>
</li>
<li>
<a href="#california" id="california">
California
</a>
</li>
<li>
<a href="#colorado" id="colorado">
Colorado
</a>
</li>
<li>
<a href="#connecticut" id="connecticut">
Connecticut
</a>
</li>
<li>
<a href="#deleware" id="deleware">
Delware
</a>
</li>
<li>
<a href="#florida" id="florida">
Florida
</a>
</li>
</ul>
</nav>
</dt>
</dl>
<dl>
<dt>
Ordered List<br />
<small>
<code>c-nav</code>
</small>
</dt>
<dd>
<nav class="c-nav">
<ol>
<li>
<a href="#alabama" id="alabama">
Alabama
</a>
</li>
<li>
<a href="#alaska" id="alaska">
Alaska
</a>
</li>
<li>
<a href="#arizona" id="arizona">
Arizona
</a>
</li>
<li>
<a href="#arkansas" id="arkansas">
Arkansas
</a>
</li>
<li>
<a href="#california" id="california">
California
</a>
</li>
<li>
<a href="#colorado" id="colorado">
Colorado
</a>
</li>
<li>
<a href="#connecticut" id="connecticut">
Connecticut
</a>
</li>
<li>
<a href="#deleware" id="deleware">
Delware
</a>
</li>
<li>
<a href="#florida" id="florida">
Florida
</a>
</li>
</ol>
</nav>
</dt>
</dl>
<dl>
<dt>
No List<br />
<small>
<code>c-nav</code>
<code>c-nav--no-list</code>
</small>
</dt>
<dd>
<nav class="c-nav c-nav--no-list">
<a href="#alabama" id="alabama">
Alabama
</a>
<a href="#alaska" id="alaska">
Alaska
</a>
<a href="#arizona" id="arizona">
Arizona
</a>
<a href="#arkansas" id="arkansas">
Arkansas
</a>
<a href="#california" id="california">
California
</a>
<a href="#colorado" id="colorado">
Colorado
</a>
<a href="#connecticut" id="connecticut">
Connecticut
</a>
<a href="#deleware" id="deleware">
Delware
</a>
<a href="#florida" id="florida">
Florida
</a>
</nav>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
main {
display: flex;
flex-wrap: wrap;
gap: var(--global-space--grid-gap);
}
dd {
display: flex;
flex-wrap: wrap;
gap: calc( var(--global-space--grid-gap) / 2);
}
small > code:not(:last-child)::after {
content: '';
padding-inline: 0.5em;
display: inline;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"links": [
{
"name": "Alabama",
"href": "#alabama",
"id": "alabama"
},
{
"name": "Alaska",
"href": "#alaska",
"id": "alaska"
},
{
"name": "Arizona",
"href": "#arizona",
"id": "arizona"
},
{
"name": "Arkansas",
"href": "#arkansas",
"id": "arkansas"
},
{
"name": "California",
"href": "#california",
"id": "california"
},
{
"name": "Colorado",
"href": "#colorado",
"id": "colorado"
},
{
"name": "Connecticut",
"href": "#connecticut",
"id": "connecticut"
},
{
"name": "Delware",
"href": "#deleware",
"id": "deleware"
},
{
"name": "Florida",
"href": "#florida",
"id": "florida"
}
]
}