# TabBar

> A phone's bottom tab bar: four or five destinations under the thumb, each an icon over its name, fixed above the home indicator, gone from the width where the sidebar takes over.

```ts
import { TabBar } from "@sdxc/ui/app";
```

Renders the bar. The outer box keeps the bar's height in the flow while the bar itself is
fixed to the viewport's foot, so it reads as one more block at the end of the page; a
screen at or above `hideFrom` draws neither.

## Examples

```tsx
<TabBar label="Primary">
	<TabBar.Item href="/" icon={<HomeIcon />} label="Home" current />
	<TabBar.Item href="/alerts" icon={<BellIcon />} label="Alerts" count={3} countLabel="3 new" />
</TabBar>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | The landmark's name, such as "Primary". |
| `hideFrom?` | `"30rem" \| "40rem" \| "48rem" \| "64rem" \| "never"` |  |
| `showLabels?` | `boolean` | Shows each item's name under its icon; `false` keeps names for assistive tech alone. @default true |
| `children` | `RemixNode` | Four or five TabBar.Items. |

Also accepts everything in `TagProps<"nav">`.


### TabBar.Item

One destination: the whole column is the link, at least 44px square.

Takes no props of its own.

## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `HideFrom` | `"30rem" \| "40rem" \| "48rem" \| "64rem" \| "never"` | The width from which the bar is gone, matching where the app's sidebar appears; `never` keeps it at every width, for an app made for phones alone. |