Tabs

Sections

Link tabs; each is an address, so the back button works.

Tabs {
    items: vec![
        ("overview".into(), "Overview".into()),
        ("activity".into(), "Activity".into()),
        ("settings".into(), "Settings".into()),
    ],
    current: 0,
}

Second tab

The current tab is marked for screen readers.

Tabs {
    items: vec![("open".into(), "Open".into()), ("closed".into(), "Closed".into())],
    current: 1,
}

Many tabs

Keep to a handful; more belongs in a sidebar.

Tabs {
    items: vec![
        ("all".into(), "All".into()),
        ("mine".into(), "Mine".into()),
        ("team".into(), "Team".into()),
        ("agents".into(), "Agents".into()),
        ("archived".into(), "Archived".into()),
    ],
    current: 2,
}

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_core::Tabs;
Tabs { items: vec![("open".into(), "Open".into()), ("closed".into(), "Closed".into())], current: 0 }

use ocean_ui_native::{core::Tabs, widgets::Pick};
let items = vec![("changes".into(), "Changes".into()), ("files".into(), "Files".into())];
let clicked: Option<String> = Tabs { items, current: 0 }.pick(ui).value;

Cargo feature forms of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

Props

Accessibility

• The tabs are links in a nav landmark named Tabs, not an ARIA tablist, so Tab and Enter work as on any link.
• The current tab says aria-current="page".
• Each tab loads its view as a page, so the back button returns to the tab before.

Related

• Segmented
• Page head
• Card

Markdown

The same page as Markdown, for an agent or a pull request.

# Tabs

Tabs that switch between views of one page, the current one marked; on the web each is a ?tab= link.

Tabs split one page into a few views that share its title, such as Open, Closed and All. On the web each tab is a link to ?tab=<id> on the same page, so every view has its own address and works without script; the native face hands back the id clicked through Pick. Items are (id, label) pairs in order, and current is the index of the one shown.

## Use it

Web:

```rust
use ocean_ui_core::Tabs;
Tabs { items: vec![("open".into(), "Open".into()), ("closed".into(), "Closed".into())], current: 0 }
```

Native:

```rust
use ocean_ui_native::{core::Tabs, widgets::Pick};
let items = vec![("changes".into(), "Changes".into()), ("files".into(), "Files".into())];
let clicked: Option<String> = Tabs { items, current: 0 }.pick(ui).value;
```

Cargo feature `forms`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `items` | `Vec<(String, String)>` | `—` | The tabs in order as (id, label) pairs; the id goes in the address on the web and comes back from Pick natively. |
| `current` | `usize` | `—` | The index of the tab being shown. |

On the Mac: ![Tabs, dark](/ui/native/tabs-dark.png) ![Tabs, light](/ui/native/tabs-light.png)

## Examples

### Sections

Link tabs; each is an address, so the back button works.

```rust
Tabs {
    items: vec![
        ("overview".into(), "Overview".into()),
        ("activity".into(), "Activity".into()),
        ("settings".into(), "Settings".into()),
    ],
    current: 0,
}
```

### Second tab

The current tab is marked for screen readers.

```rust
Tabs {
    items: vec![("open".into(), "Open".into()), ("closed".into(), "Closed".into())],
    current: 1,
}
```

### Many tabs

Keep to a handful; more belongs in a sidebar.

```rust
Tabs {
    items: vec![
        ("all".into(), "All".into()),
        ("mine".into(), "Mine".into()),
        ("team".into(), "Team".into()),
        ("agents".into(), "Agents".into()),
        ("archived".into(), "Archived".into()),
    ],
    current: 2,
}
```

## Accessibility

- The tabs are links in a nav landmark named Tabs, not an ARIA tablist, so Tab and Enter work as on any link.
- The current tab says aria-current="page".
- Each tab loads its view as a page, so the back button returns to the tab before.

## Related

- [Segmented](/ui/components/segmented.md)
- [Page head](/ui/components/page-head.md)
- [Card](/ui/components/card.md)