TACC UI Pattern Library

C Nav: No List

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 class c-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>
        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>
        <nav class="c-nav c-nav--no-list">
            <button id="alabama">Alabama</button><button id="alaska">Alaska</button><button id="arizona">Arizona</button><button id="arkansas">Arkansas</button><button id="california">California</button><button id="colorado">Colorado</button><button id="connecticut">Connecticut</button><button id="deleware">Delware</button><button id="florida">Florida</button>
        </nav>
        <nav class="c-nav c-nav--no-list">
            <button class="c-button c-button--as-link" id="alabama">Alabama</button><button class="c-button c-button--as-link" id="alaska">Alaska</button><button class="c-button c-button--as-link" id="arizona">Arizona</button><button class="c-button c-button--as-link" id="arkansas">Arkansas</button><button class="c-button c-button--as-link" id="california">California</button><button class="c-button c-button--as-link" id="colorado">Colorado</button><button class="c-button c-button--as-link" id="connecticut">Connecticut</button><button class="c-button c-button--as-link" id="deleware">Delware</button><button class="c-button c-button--as-link" id="florida">Florida</button>
        </nav>
    </dd>
    <dt>
        No List<br />
        <small>
            <code>c-nav</code>
            <code>c-nav--no-list</code>
            <code>c-nav--boxed</code>
        </small>
    </dt>
    <dd>
        <nav class="c-nav c-nav--no-list c-nav--boxed">
            <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>
    <dt>
        No List<br />
        <small>
            <code>c-nav</code>
            <code>c-nav--no-list</code>
            <code>c-nav--piped</code>
        </small>
    </dt>
    <dd>
        <nav class="c-nav c-nav--no-list c-nav--piped">
            <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>
        <nav class="c-nav c-nav--no-list c-nav--piped">
            <button id="alabama">Alabama</button><button id="alaska">Alaska</button><button id="arizona">Arizona</button><button id="arkansas">Arkansas</button><button id="california">California</button><button id="colorado">Colorado</button><button id="connecticut">Connecticut</button><button id="deleware">Delware</button><button id="florida">Florida</button>
        </nav>
        <nav class="c-nav c-nav--no-list c-nav--piped">
            <button class="c-button c-button--as-link" id="alabama">Alabama</button><button class="c-button c-button--as-link" id="alaska">Alaska</button><button class="c-button c-button--as-link" id="arizona">Arizona</button><button class="c-button c-button--as-link" id="arkansas">Arkansas</button><button class="c-button c-button--as-link" id="california">California</button><button class="c-button c-button--as-link" id="colorado">Colorado</button><button class="c-button c-button--as-link" id="connecticut">Connecticut</button><button class="c-button c-button--as-link" id="deleware">Delware</button><button class="c-button c-button--as-link" id="florida">Florida</button>
        </nav>
    </dd>
</dl>
  • Content: 
    /* 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;
}
  • URL: /components/raw/c-nav/demo.css
  • Filesystem Path: src/lib/_imports/components/c-nav/demo.css
  • Size: 356 Bytes 
{
  "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"
    }
  ],
  "show_buttons": true,
  "modifiers": [
    [],
    [
      "boxed"
    ],
    [
      "piped"
    ]
  ]
}