SegmentedControl

A row of segments where one is selected, rendered as Tabler’s nav-segmented. Each segment is a Bootstrap tab (data-bs-toggle="tab"), so tabler.js moves the selection on click. Segments are <button type="button">, so they never submit an enclosing form.

<twig:Tabler:SegmentedControl aria-label="Period">
    <twig:Tabler:SegmentedControl:Item active="{{ true }}">Day</twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>Week</twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>Month</twig:Tabler:SegmentedControl:Item>
</twig:Tabler:SegmentedControl>

<nav class="nav nav-segmented" role="tablist" aria-label="Period">
    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">Day</button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        Week
    </button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        Month
    </button>
</nav>

To show a panel per segment, add data-bs-target="#pane-id" to each item; attributes are forwarded to the <button>. Without a target, the control only switches its selected segment: listen to Bootstrap’s shown.bs.tab event to react to it.

Icons

Put an icon before the label with the nav-link-icon class:

<twig:Tabler:SegmentedControl aria-label="Layout">
    <twig:Tabler:SegmentedControl:Item active="{{ true }}">
        <twig:Tabler:Icon name="layout-grid" class="nav-link-icon" /> Grid
    </twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>
        <twig:Tabler:Icon name="list" class="nav-link-icon" /> List
    </twig:Tabler:SegmentedControl:Item>
</twig:Tabler:SegmentedControl>

<nav class="nav nav-segmented" role="tablist" aria-label="Layout">
    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">
        <i class="ti ti-layout-grid nav-link-icon"></i>
        Grid
    </button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        <i class="ti ti-list nav-link-icon"></i>
        List
    </button>
</nav>

Full width

fullWidth stretches the control, and its segments, to the width of the container. A segment takes the native disabled attribute:

<twig:Tabler:SegmentedControl fullWidth="{{ true }}" aria-label="Invoice status">
    <twig:Tabler:SegmentedControl:Item active="{{ true }}">All</twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>Paid</twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>Overdue</twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item disabled>Draft</twig:Tabler:SegmentedControl:Item>
</twig:Tabler:SegmentedControl>

<nav class="nav nav-segmented w-100" role="tablist" aria-label="Invoice status">
    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">All</button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        Paid
    </button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        Overdue
    </button>
    <button
        type="button"
        class="nav-link"
        role="tab"
        data-bs-toggle="tab"
        aria-selected="false"
        tabindex="-1"
        disabled=""
    >
        Draft
    </button>
</nav>

Sizes

{% for size in ['sm', 'md', 'lg'] %}
    <div class="mb-3">
        <twig:Tabler:SegmentedControl size="{{ size }}" aria-label="Period">
            <twig:Tabler:SegmentedControl:Item active="{{ true }}">Day</twig:Tabler:SegmentedControl:Item>
            <twig:Tabler:SegmentedControl:Item>Week</twig:Tabler:SegmentedControl:Item>
            <twig:Tabler:SegmentedControl:Item>Month</twig:Tabler:SegmentedControl:Item>
        </twig:Tabler:SegmentedControl>
    </div>
{% endfor %}

<div class="mb-3">
    <nav class="nav nav-segmented nav-sm" role="tablist" aria-label="Period">
        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">Day</button>
        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
            Week
        </button>
        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
            Month
        </button>
    </nav>
</div>
<div class="mb-3">
    <nav class="nav nav-segmented" role="tablist" aria-label="Period">
        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">Day</button>
        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
            Week
        </button>
        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
            Month
        </button>
    </nav>
</div>
<div class="mb-3">
    <nav class="nav nav-segmented nav-lg" role="tablist" aria-label="Period">
        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">Day</button>
        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
            Week
        </button>
        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
            Month
        </button>
    </nav>
</div>

Vertical

vertical stacks the segments in a column:

<twig:Tabler:SegmentedControl vertical="{{ true }}" aria-label="Settings section">
    <twig:Tabler:SegmentedControl:Item active="{{ true }}">
        <twig:Tabler:Icon name="user" class="nav-link-icon" /> Profile
    </twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>
        <twig:Tabler:Icon name="bell" class="nav-link-icon" /> Notifications
    </twig:Tabler:SegmentedControl:Item>
    <twig:Tabler:SegmentedControl:Item>
        <twig:Tabler:Icon name="credit-card" class="nav-link-icon" /> Billing
    </twig:Tabler:SegmentedControl:Item>
</twig:Tabler:SegmentedControl>

<nav class="nav nav-segmented nav-segmented-vertical" role="tablist" aria-label="Settings section">
    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">
        <i class="ti ti-user nav-link-icon"></i>
        Profile
    </button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        <i class="ti ti-bell nav-link-icon"></i>
        Notifications
    </button>
    <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
        <i class="ti ti-credit-card nav-link-icon"></i>
        Billing
    </button>
</nav>

Props

Prop	Type	Default	Description
`fullWidth`	bool	`false`	Stretches to the container (`w-100`)
`vertical`	bool	`false`	Stacks the segments (`nav-segmented-vertical`)
`size`	string	`'md'`	`sm` `md` `lg` (`nav-sm`, `nav-lg`)

Other attributes go to the root <nav role="tablist">: give it an aria-label.

Sub-components

Component	Renders
`SegmentedControl:Item`	`<button type="button" class="nav-link" role="tab" data-bs-toggle="tab">`, with `aria-selected`

SegmentedControl:Item takes one prop:

Prop	Type	Default	Description
`active`	bool	`false`	The selected segment (`active`, `aria-selected="true"`); the others get `tabindex="-1"`

Its type is button unless you pass another one, such as type="submit".