Navigation lists
Default
The default navigation pattern.
Tabs
Tabbed navigation.
Small
Smaller navigation list
{#
Parameters:
- "title" (string) (default: 'Navigation'): for screen readers
- "display" (string) (default: 'default'): can be 'default', 'tabs' or 'small'
- "links" (array) (default: []): collection of @ecl/ec-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>
-
Content:
/** * ECL Navigation * @define navigation-list */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-navigation-list/generic-component-navigation-list'; // Check if overridden dependencies are already loaded, if needed @include check-imports(('ec-component-link')); // Use generic mixin @include exports('ec-component-navigation-list') { @include ecl-navigation-list(); }
- URL: /components/raw/ec-component-navigation-list/ec-component-navigation-list.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-navigation/ec-component-navigation-list/ec-component-navigation-list.scss
- Size: 420 Bytes
- Handle: @ecl/ec-component-navigation-list
- Tags: organism
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-navigation/ec-component-navigation-list/ec-component-navigation-list.twig