Navigation lists

Documentation • Demo

Ready

Default

The default navigation pattern.

Tabs

Tabbed navigation.

Small

Smaller navigation list

View
Context
HTML
Code
Info


        {#
  Parameters:
    - "title" (string) (default: 'Navigation'): for screen readers
    - "display" (string) (default: 'default'): can be 'default', 'tabs' or 'small'
    - "links" (array) (default: []): collection of @ecl/eu-component-link
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-navigation-list' with {
  'title': title|default('Navigation'),
  'display': display|default('default'),
  'links': links|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}


        
        
            /* Default */
{
  "display": "default",
  "title": "Default Navigation Menu",
  "links": [
    {
      "href": "../../example.html#",
      "label": "Home"
    },
    {
      "href": "../../example.html#",
      "label": "About Us",
      "is_active": true
    },
    {
      "href": "../../example.html#",
      "label": "More Information"
    },
    {
      "href": "../../example.html#",
      "label": "Contact Us"
    }
  ]
}


        
            /* Tabs */
{
  "display": "tabs",
  "title": "Tabs Navigation Menu",
  "links": [
    {
      "href": "../../example.html#",
      "label": "Home"
    },
    {
      "href": "../../example.html#",
      "label": "About Us",
      "is_active": true
    },
    {
      "href": "../../example.html#",
      "label": "More Information"
    },
    {
      "href": "../../example.html#",
      "label": "Contact Us"
    }
  ]
}


        
            /* Small */
{
  "display": "small",
  "title": "Small Navigation Menu",
  "links": [
    {
      "href": "../../example.html#",
      "label": "Home"
    },
    {
      "href": "../../example.html#",
      "label": "About Us",
      "is_active": true
    },
    {
      "href": "../../example.html#",
      "label": "More Information"
    },
    {
      "href": "../../example.html#",
      "label": "Contact Us"
    }
  ]
}


        
        
            <!-- Default -->
<nav class="ecl-navigation-list-wrapper">
  <h2 class="ecl-u-sr-only">Default Navigation Menu</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--default">
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">Home</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link ecl-navigation-list__link--active" href="../../example.html#">About Us</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">More Information</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">Contact Us</a>
    </li>
  </ul>
</nav>


        
            <!-- Tabs -->
<nav class="ecl-navigation-list-wrapper">
  <h2 class="ecl-u-sr-only">Tabs Navigation Menu</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--tabs">
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">Home</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link ecl-navigation-list__link--active" href="../../example.html#">About Us</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">More Information</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">Contact Us</a>
    </li>
  </ul>
</nav>


        
            <!-- Small -->
<nav class="ecl-navigation-list-wrapper">
  <h2 class="ecl-u-sr-only">Small Navigation Menu</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--small">
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">Home</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link ecl-navigation-list__link--active" href="../../example.html#">About Us</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">More Information</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-navigation-list__link" href="../../example.html#">Contact Us</a>
    </li>
  </ul>
</nav>

File:

Content:


                                /**
 * ECL Navigation
 * @define navigation-list
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-navigation-list/generic-component-navigation-list';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-component-link'));

// Use generic mixin
@include exports('eu-component-navigation-list') {
  @include ecl-navigation-list();
}

URL: /components/raw/eu-component-navigation-list/eu-component-navigation-list.scss
Filesystem Path: ../../src/systems/eu/eu-component/eu-component-navigation/eu-component-navigation-list/eu-component-navigation-list.scss
Size: 420 Bytes

Handle: @ecl/eu-component-navigation-list
Tags: organism
Preview:
- With layout
- Component only
Filesystem Path: ../../src/systems/eu/eu-component/eu-component-navigation/eu-component-navigation-list/eu-component-navigation-list.twig