> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# BottomNavigation
> A fixed bottom bar of BottomNavigationAction items, for switching between the top-level sections of a mobile layout.
```tsx theme={null}
import { BottomNavigation, BottomNavigationAction } from "@fanvue/ui";
import type { BottomNavigationActionProps, BottomNavigationProps } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import * as React from "react";
import {
AddIcon,
Avatar,
BellIcon,
BottomNavigation,
BottomNavigationAction,
Count,
HomeIcon,
MessageIcon,
} from "@fanvue/ui";
function Example() {
const [value, setValue] = React.useState("home");
return (
}
label="Home"
/>
}
label="Notifications"
badge={
}
/>
} label="Create" />
}
label="Messages"
badge={
}
/>
}
label="Profile"
/>
);
}
```
## Selected State
```tsx theme={null}
import {
BottomNavigation,
BottomNavigationAction,
HomeIcon,
LoveIcon,
SearchIcon,
UserIcon,
} from "@fanvue/ui";
} label="Home" />
} label="Search" />
} label="Favorites" />
} label="Profile" />
```
## With Badges
```tsx theme={null}
import * as React from "react";
import {
BottomNavigation,
BottomNavigationAction,
Count,
HomeIcon,
LoveIcon,
SearchIcon,
UserIcon,
} from "@fanvue/ui";
function Example() {
const [value, setValue] = React.useState("home");
return (
}
label="Home"
/>
}
label="Search"
/>
}
label="Favorites"
badge={
}
/>
}
label="Profile"
/>
);
}
```
## Information Architecture Nav – Selected State
```tsx theme={null}
import {
BottomNavigation,
BottomNavigationAction,
HomeIcon,
LoveIcon,
SearchIcon,
UserIcon,
} from "@fanvue/ui";
} label="Home" />
} label="Search" />
} label="Favorites" />
} label="Profile" />
```
## With asChild (Links)
```tsx theme={null}
import * as React from "react";
import {
BottomNavigation,
BottomNavigationAction,
HomeIcon,
LoveIcon,
SearchIcon,
UserIcon,
} from "@fanvue/ui";
function Example() {
const [value, setValue] = React.useState("home");
return (
}
label="Home"
asChild
>
{/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
}
label="Search"
asChild
>
{/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
}
label="Favorites"
asChild
>
{/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
}
label="Profile"
asChild
>
{/* biome-ignore lint/a11y/useAnchorContent: content provided by Slot */}
);
}
```
## Props
## BottomNavigation
When `true`, renders the information-architecture style with visible labels and a sliding active indicator.
When `true`, the navigation bar is hidden on viewports wider than `md` (768 px).
Called when the selected action changes.
The currently selected action value.
## BottomNavigationAction
Icon element displayed in the action.
Unique value that identifies this action.
Merge props onto a child element instead of rendering a `
Optional badge element (e.g. `Count`) rendered at the top-end corner of the icon.
Accessible label applied as `aria-label`.
## Exported types
Also exported from `@fanvue/ui`: `BottomNavigationActionProps`, `BottomNavigationProps`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)