BX Swiss Component Library

Navigation

The navigation component should only be used to contain the main site navigation. It is invisible on mobile screen sizes and can be made visible by clicking the menu button through the use of JavaScript.

<nav class="navigation" role="navigation">
    <button class="navigation__trigger button button--primary">menu</button>
    <ul class="navigation__category-list unstyled">
        <li class="navigation__category">
            <div class="heading heading--tiny" id="navigation-category-instruments">Instruments</div>
            <ul class="navigation__list unstyled " aria-labelledby="navigation-category-instruments">
                <li class="navigation__item">
                    <a href="#">Shares</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Funds</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Bonds</a>
                </li>
            </ul>
        </li>
        <li class="navigation__category">
            <div class="heading heading--tiny" id="navigation-category-information">Information</div>
            <ul class="navigation__list unstyled navigation__list--multicolumn" aria-labelledby="navigation-category-information">
                <li class="navigation__item">
                    <a href="#">Regulatory</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Shareholders</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Latest trades</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Notices</a>
                </li>
                <li class="navigation__item">
                    <a href="#" class="is-active" aria-current="page">Market calendar</a>
                </li>
            </ul>
        </li>
        <li class="navigation__category">
            <div class="heading heading--tiny" id="navigation-category-tools">Tools</div>
            <ul class="navigation__list unstyled navigation__list--multicolumn" aria-labelledby="navigation-category-tools">
                <li class="navigation__item">
                    <a href="#">Reporting tool</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Issuer extranet</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Watchlist</a>
                </li>
                <li class="navigation__item">
                    <a href="#">Logout</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
 
<nav class="navigation" role="navigation">
    <button class="navigation__trigger button button--primary">menu</button>
    <ul class="navigation__category-list unstyled">
        {{#each categories}}
        <li class="navigation__category">
            <div class="heading heading--tiny" id="navigation-category-{{id}}">{{ title }}</div>
            <ul class="navigation__list unstyled {{#if hasColumns}}navigation__list--multicolumn{{/if}}" aria-labelledby="navigation-category-{{id}}">
                {{#each items}}
                <li class="navigation__item">
                    <a href="#" {{#if isActive}}class="is-active" aria-current="page"{{/if}}>{{ label }}</a>
                </li>
                {{/each}}
            </ul>
        </li>
        {{/each}}
    </ul>
</nav>
 
{
  "categories": [
    {
      "id": "instruments",
      "title": "Instruments",
      "items": [
        {
          "label": "Shares"
        },
        {
          "label": "Funds"
        },
        {
          "label": "Bonds"
        }
      ]
    },
    {
      "id": "information",
      "title": "Information",
      "hasColumns": true,
      "items": [
        {
          "label": "Regulatory"
        },
        {
          "label": "Shareholders"
        },
        {
          "label": "Latest trades"
        },
        {
          "label": "Notices"
        },
        {
          "label": "Market calendar",
          "isActive": true
        }
      ]
    },
    {
      "id": "tools",
      "title": "Tools",
      "hasColumns": true,
      "items": [
        {
          "label": "Reporting tool"
        },
        {
          "label": "Issuer extranet"
        },
        {
          "label": "Watchlist"
        },
        {
          "label": "Logout"
        }
      ]
    }
  ]
}