# Tab > Tabs switch between related views in the same place on the page. They can hold icons, a dropdown or fill the full width. Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills. Source: https://docs.tabler.io/ui/components/tab --- ## Default markup The default tabs highlight the current one. Each tab trigger points at a panel, and Bootstrap shows one panel at a time. ```html

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
``` ## Tabs with icons An [icon](/ui/components/icon) in the tab label makes tabs easier to tell apart when the labels are similar. ```html

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Settings tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
``` ## Tabs only with icons Tabs with only an icon save space. Give each one an `aria-label`, because there's no text to read. ```html

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Settings tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
``` ## Tabs with dropdown A tab can open a [dropdown](/ui/components/dropdown) with more views, so a long row of tabs stays short. ```html

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
``` ## Full-width tabs Add the `.nav-fill` class to make the tabs take up the full space of the parent element. ```html

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Activity tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
``` ## JavaScript Tabler activates the tab that matches the URL hash on page load, so you can link to a specific tab. This is the code that runs: ```ts export const EnableActivationTabsFromLocationHash = (): void => { const locationHash: string = window.location.hash if (locationHash) { const tabsList: HTMLAnchorElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]')) const matchedTabs = tabsList.filter((tab: HTMLAnchorElement) => tab.hash === locationHash) matchedTabs.map((tab: HTMLAnchorElement) => { new Tab(tab).show() }) } } EnableActivationTabsFromLocationHash() ``` _Source: `core/js/src/tab.ts`_ ## Accessibility - Wrap the tabs in an element with `role="tablist"`, give each trigger `role="tab"` and each panel `role="tabpanel"`, and link them with `aria-controls` and `aria-labelledby`. - Bootstrap sets `aria-selected` and moves focus with the arrow keys, but only when the roles above are present. Without them the tabs are plain links. - Tabler activates a tab from the url hash on page load, so a tab trigger with `href="#billing"` doubles as a deep link. Keep the panel ids stable if you link to them. - Only the active panel should be reachable. Bootstrap hides the others with `display: none`, which also removes them from the tab order.