> Source: https://laravilt.com/docs/frontend/layouts
# Layouts
Laravilt provides several layouts for different page types.
## Available Layouts
### AppLayout (Default)
The main admin panel layout with sidebar, header, and content area:
```vue
Dashboard Content
```
**Features:**
- Collapsible sidebar
- Top header with global search
- User menu
- Breadcrumbs support
- Theme switching
### AuthLayout
Simple centered layout for authentication pages:
```vue
```
**Features:**
- Centered card
- Logo display
- Clean background
### GuestLayout
Public pages layout without authentication:
```vue
```
## Layout Structure
### AppLayout Anatomy
```
┌─────────────────────────────────────────────────────────┐
│ AppHeader (fixed top) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Logo │ Global Search │ Theme │ User Menu │ │
│ └─────────────────────────────────────────────────────┘ │
├──────────┬──────────────────────────────────────────────┤
│ │ │
│ AppSide- │ AppContent │
│ bar │ │
│ │ ┌──────────────────────────────────────────┐ │
│ ┌──────┐ │ │ Page Header (title, actions) │ │
│ │NavMain│ │ └──────────────────────────────────────────┘ │
│ └──────┘ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ ┌──────┐ │ │ │ │
│ │NavFtr │ │ │ Slot Content │ │
│ └──────┘ │ │ │ │
│ │ └──────────────────────────────────────────┘ │
└──────────┴──────────────────────────────────────────────┘
```
### Sidebar States
**Expanded:**
- Full width (256px default)
- Icon + text navigation items
- Group labels visible
- Full user info display
**Collapsed:**
- Icon-only width (64px)
- Navigation groups become dropdowns
- Tooltips on hover
- Mini user avatar
## Using Layouts
### With Inertia Pages
```vue
```
### With Page Actions
```vue
```
### With Breadcrumbs
```vue
```
## Customizing Layouts
### Custom Sidebar Width
```css
/* In your global CSS */
:root {
--sidebar-width: 280px;
--sidebar-collapsed-width: 72px;
}
```
### Custom Theme Colors
```css
:root {
--primary: 174 94% 38%; /* #04bdaf */
--secondary: 296 53% 31%; /* #822478 */
}
.dark {
--primary: 174 94% 45%;
--secondary: 296 53% 40%;
}
```
### Adding Layout Slots
Create a custom layout with additional slots:
```vue
```
## Responsive Behavior
### Mobile Sidebar
On mobile devices (`< 768px`):
- Sidebar becomes an overlay sheet
- Toggle button in header
- Swipe to close support
- Dark backdrop when open
### Tablet Mode
On tablets (`768px - 1024px`):
- Sidebar defaults to collapsed
- Can be expanded by user
- Content uses full width
### Desktop Mode
On desktop (`> 1024px`):
- Sidebar defaults to expanded
- Collapsible with toggle
- Content respects sidebar width
## Best Practices
### Use Semantic Structure
```vue
```
### Handle Loading States
```vue
```
### Persist User Preferences
Sidebar state and theme preferences are automatically persisted in localStorage.