Horizontal tabs Optional
Horizontal tab style navigation, with sideways scrolling when needed. This component is usually displayed in a header section and used for navigation links related to the current page.
Features
- Menu items are visible on a single line.
- Horizontal "snappy" scrolling if needed.
- Menu items can be links (
<a>) or grouped links (<details>), displayed in a dropdown menu. - Menu items have an icon, via the themes icon font (
class="icon-…). - Menu items can be marked to show the current location (
class="current").
Configuration
- Sass file: components/_horizontal-tabs.scss
- Include the Sass file in theme.scss:
@use "components/horizontal-tabs"; - Javascript file: components/_horizontal-tabs.js
- Include the compiled javascript file in the Html:
<script src="/javascript/horizontal-tabs.min.js"></script>
Examples
Variants: 3 x grouped links, 5 x links.
View source for Html code.
Icons and text:
Text:
Current location in group:
Current location in link:
Javascript
The javascript file adds progressive enhancement for the component. Supports multiple components, so the script is only needed once on each page.
The component works without javascript, but the javascript adds the some additional functionality and style for grouped links (<details>):
- Positioning of the groups, when the menu is scrolled horizontally.
- Minimum width of the groups.