Fijn

Tabs component: Utility Bar 

<ul class="nav nav-tabs m-tabs bg-white position-relative">

    <li class="nav-item active">
        <a href="javascript:void(0)" class="nav-link">Item 1</a>
    </li>

    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link">Item 2</a>
    </li>

    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link">Item 3</a>
    </li>

    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link">Item 4</a>
    </li>

    <div class="nav-line"></div>
</ul>
 
<ul class="nav nav-tabs m-tabs bg-white position-relative">
    {% for item in items %}
        <li class="nav-item{% if item.class %} {{item.class}}{% endif %}">
            <a href="javascript:void(0)" class="nav-link">{{item.title | safe}}</a>
        </li>
    {% endfor %}
    <div class="nav-line"></div>
</ul>
 
{
  "tab_title": "",
  "count": false,
  "element": false,
  "fieldset": false,
  "items": [
    {
      "title": "Item 1",
      "class": "active"
    },
    {
      "title": "Item 2"
    },
    {
      "title": "Item 3"
    },
    {
      "title": "Item 4"
    }
  ]
}
  • Handle: @tabs--utility-bar
  • Preview:
  • Filesystem Path: templates/fractal/molecules/tabs/tabs--utility-bar.njk

No notes defined.