# Navs and tabs A row of links between views of one thing - `nav-underline` - or of choices - `nav-pills`; and the same row as tabs that switch panels on the page, driven by the keyboard as the WAI-ARIA tabs pattern. ## Examples Links between pages are a `

`; the current one is `aria-current="page"`. ```html ``` ### Tabs Tabs switch panels in place: `role="tablist"`, each tab `role="tab"` with `aria-selected` and `aria-controls`, each panel `role="tabpanel"`. The library keeps only the selected tab in the tab order and only its panel shown. The arrow keys select as they move. ```html

A day at sea: snorkelling at two reefs, lunch on the boat.

``` ### A tab with changes `data-changed`, set by the page, puts a dot on a tab whose panel holds something not saved yet, the same word as on a field. Its `aria-label` says so to a screen reader. ```html

The company's name and address.

``` ### Tabs whose panels load When a panel comes from the server, the arrows should not load every panel they pass: `data-activation="manual"` on the tablist makes them move the focus only, and `Enter` or `Space` selects. ```html

128 bookings this week.

``` ### A tab that asks before it is left Before a person's click or key selects a tab, the tablist fires the cancelable `redz:select`; its `detail` holds `tab`, the one asked for, and `from`, the one being left. A page that must ask first - a form with unsaved edits - calls `event.preventDefault()` and `event.detail.respondWith(promise)`: the tab is selected when the promise gives `true`, and otherwise the one being left stays, with the focus. Change the note below, then choose another tab. ```html

A note for the guides

``` ```js tablist.addEventListener('redz:select', (event) => { if (form.dataset.changed !== undefined) { event.preventDefault(); event.detail.respondWith(REDZ.ui.confirm({title: 'Leave without saving?', ok: 'Leave'})); } }); ``` ### Tabs in the address A tablist with `data-hash` follows the address: `location.hash` naming a panel, or anything inside one, selects its tab - when the page loads and when the hash changes, a tablist inside a panel too -, and a person's choice writes the panel's id into the address, so a link or a reload opens the same tab. After every selection, the first one too, the tablist fires `redz:selected` with `detail.tab`. `REDZ.ui.select(tab)` chooses a tab from code as a person would - through `redz:select`, so the page can still refuse - and answers a promise of whether it was selected. ```html

Two adults, one child.

The payment opens its tab.

``` ```js tablist.addEventListener('redz:selected', (event) => load(event.detail.tab)); await REDZ.ui.select(document.getElementById('nav-hash-3')); ``` ### Filling the width `nav-fill` lets the links share the width by their length, `nav-justified` in equal parts. ```html ``` ### Where you are on the page A nav or a list group with `data-scrollspy` marks the link to the section in view `aria-current="location"` as the page - or the box the sections scroll in - scrolls: the last section whose top has passed a quarter of the height, or the last one at the end. ```html

Plan

Pick-up at the hotel at 7:30, the pier at 8:15. The crew hands out life vests and snorkels before the boat leaves the bay.

The boat

A speedboat for 30 guests with shade and a toilet; the ride to the park takes an hour across open water.

Lunch

Lunch on a beach of the park: rice, green curry, fruit and water; vegetarian on request.

Back

The boat leaves the park at 15:30 and reaches the pier by 17:00; the transfer brings everyone back to the hotel.

``` ### A row that scrolls A nav or a tab list wider than its box scrolls sideways, and the edge it goes on past fades - `data-more` says which, `start`, `end` or both, as the person scrolls; when the page loads, the current or selected item is scrolled into the row's view, the page itself left where it is. ```html ``` ### When the links do not fit `nav-overflow` around a nav keeps it on one line: the links that do not fit hide from the end and come back, in their order, as the items of a menu behind a “More” button after the nav. The link the person is on and a link with `nav-overflow-keep` stay in the row. A link that opens a [menu](menu.md) folds with it, as a group of its items under the link's words, and stays in the row while its menu holds the page the person is on; a [navbar](navbar.md) shows one. A link the page hides with `hidden` leaves the row and the menu, and comes back when the page shows it. It measures the room its own box has, not the window, so a nav in a narrow column folds as early as it needs to. For a row of links the wrapper is the `

`, so the menu stays inside the landmark. ```html ``` Tabs fold the same way. The arrows move between the tabs in the row; a tab chosen in the menu comes back into the row selected, with the focus, and the last one in the row takes its place in the menu. ```html

Anna Sample, two trips this year.

``` ## States ## Keyboard and accessibility | Key | In a tablist | | --- | --- | | `→` / `←` | The next / the previous tab, round the ends - mirrored right to left; `↓` / `↑` in a list with `aria-orientation="vertical"` | | `Home` / `End` | The first / the last tab | | `Enter`, `Space` | Selects the focused tab - what the arrows do not, with `data-activation="manual"` | | `Tab` | From the selected tab into its panel, or first to the “More” button when the row has one | - Links that change the page are a `

` of links, never tabs: tabs only switch what is already on the page. - A link folded into the “More” menu is hidden in the row, so a screen reader and `Tab` meet it once, in the menu. The button says the page's text `more`, reports whether its menu is open, and opens it by the menu's keys; a plain click on an item clicks the hidden link itself, so the page's own handlers run. - A mark beside a tab's words - a dot, a count - has its own name, so the tab reads as “EN, 1 field outdated”. ## Tokens From [`css/components/nav.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/nav.css). It declares `--redz-fade-left`, `--redz-fade-right` on its root, never on rows or items. It reads the theme's `--redz-space-16`, `--redz-space-8`, `--redz-text-muted`, `--redz-text`, `--redz-warning`, `--redz-border`, `--redz-space-4`, `--redz-radius-8`, `--redz-bg-hover`, `--redz-space-12`, `--redz-radius-6`, `--redz-fs-12`, `--redz-bg`, `--redz-shadow-1`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `nav-item` | - | remove | links sit straight in the nav | | `nav-tabs` | `nav-underline` | rename | tabs are drawn as an underline | | `tab-content` | - | remove | panels are siblings with role="tabpanel", hidden when not selected | | `tab-pane` | - | remove | panels are siblings with role="tabpanel", hidden when not selected | | `data-bs-toggle="tab"` | `role="tab" aria-controls="ID"` | trigger | in a role="tablist"; the library selects and shows the panel | | `data-bs-toggle="pill"` | `role="tab" aria-controls="ID"` | trigger | in a role="tablist" | | `data-bs-spy` | `data-scrollspy` | trigger | on the nav or list group of the links, not on the scrolled box; the link to the section in view gets aria-current="location" | | `bootstrap.Tab` | `tab.click()` | review | the library selects on click and by the keys | | `shown.bs.tab` | - | review | watch aria-selected, or the tab's click |