# App Bar
A header element for the top of your page layout.
```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Default() {
return (
Skeleton
);
}
```
## Centered
Control the layout using a [grid-cols-\*](https://tailwindcss.com/docs/grid-column) utility class.
```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Centered() {
return (
Headline
);
}
```
## Extended
Move the `` to a new row within the root.
```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Extended() {
return (
Headline
);
}
```
## Responsive
Modify the layout based on responsive breakpoints.
```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Responsive() {
return (
<>
{/* 1. Set dynamic layout columns */}
{/* 2. Set Mobile display */}
Headline
{/* 3 Set Desktop display */}
Headline
);
}
```
## Anatomy
Here's an overview of how the AppBar component is structured in code:
```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference