---
title: Navbar
description: A top navigation bar with a title and actions.
---
import Source from './_generated/navbar.mdx';

A top navigation bar — centered title on iOS, left-aligned on Material — with leading and trailing
action slots.

<DemoFrame component="navbar" />

## Large title

Set `largeTitle` to opt into the iOS large-title idiom: the bar renders its compact row (a centered
17pt title, transparent at rest) plus a big left-aligned 34px title block below it, and collapses the
large title into the compact one as the page scrolls. The scroll tracking runs against the nearest
`tcn-page` scroll container and drives a `data-collapsed` attribute that `theme.css` transitions off
(instant when `prefers-reduced-motion` is set). The page reserves the extra top clearance automatically.

Material has no large-title idiom, so there `largeTitle` is a visual no-op — the standard top app bar,
using the same `title`.

## Installation

```bash
npx touchcn add navbar
```

## Usage

<CodeGroup>

```html Angular
<tcn-navbar title="Settings">
  <button navbar-leading tcnButton variant="ghost">Back</button>
  <button navbar-trailing tcnButton variant="ghost">Edit</button>
</tcn-navbar>
```

```tsx React
import { TcnNavbar } from '@/components/ui/navbar';
import { TcnButton } from '@/components/ui/button';

<TcnNavbar
  title="Settings"
  leading={<TcnButton variant="ghost">Back</TcnButton>}
  trailing={<TcnButton variant="ghost">Edit</TcnButton>}
/>
```

```vue Vue
<script setup lang="ts">
import { TcnNavbar } from '@/components/ui/navbar';
import { TcnButton } from '@/components/ui/button';
</script>

<template>
  <TcnNavbar title="Settings">
    <template #leading>
      <TcnButton variant="ghost">Back</TcnButton>
    </template>
    <template #trailing>
      <TcnButton variant="ghost">Edit</TcnButton>
    </template>
  </TcnNavbar>
</template>
```

</CodeGroup>

## Props

| Prop         | Type        | Description                                              |
| ------------ | ----------- | ------------------------------------------------------- |
| `title`      | `string` / `ReactNode` | Bar title — centered on iOS, left-aligned on MD. |
| `leading`    | slot / `ReactNode` | Leading cluster (e.g. a back control).           |
| `trailing`   | slot / `ReactNode` | Trailing cluster (e.g. actions).                 |
| `largeTitle` | `boolean`   | Opt into the iOS large-title idiom (collapses on scroll); a no-op on MD. |
| `threshold`  | `number`    | Scroll distance (px) that collapses the large title. Defaults to `52`. |

On Angular, `leading` / `trailing` are the `[navbar-leading]` / `[navbar-trailing]` projection slots.

<Source />