Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Layouts

Responsive layout system with sidebar and header support for building application structures

Overview

The layout system provides a flexible grid-based structure for building application layouts with optional sidebar and header components. It includes responsive breakpoints, collapsible sidebar functionality, and mobile-friendly overlay behavior.

Basic Usage

The most basic layout with sidebar only: 
<neura::layout>
    <neura::sidebar>
        Sidebar content
    </neura::sidebar>
    
    <neura::layout.main>
        Main content
    </neura::layout.main>
</neura::layout>

Variants

Layouts come in two variants to accommodate different application structures:

Sidebar Variant

The default variant with sidebar and main content area. Perfect for dashboards and admin panels without a header: 
<neura::layout variant="sidebar">
    <neura::sidebar>
        Navigation items
    </neura::sidebar>
    
    <neura::layout.main>
        Page content
    </neura::layout.main>
</neura::layout>

Full Variant

Complete layout with header, sidebar, and main content area. Ideal for applications that need a persistent header: 
<neura::layout variant="full">
    <neura::layout.header>
        Header content
    </neura::layout.header>
    
    <neura::sidebar>
        Navigation items
    </neura::sidebar>
    
    <neura::layout.main>
        Page content
    </neura::layout.main>
</neura::layout>

Components

Layout Container

The main layout wrapper that manages the grid structure and responsive behavior:
Props:
  • variant - Layout variant: sidebar (default) or full
  • collapsable - Enable sidebar collapse functionality (default: false)

Header Component

The header component for the full variant layout: 
<neura::layout.header sticky>
    Header content
</neura::layout.header>
Props:
  • sticky - Make header sticky (default: true)
  • brand - Brand component slot

Sidebar Component

The sidebar component is a separate component that works with the layout system. Use neura::sidebar, not neura::layout.sidebar: 
<neura::sidebar>
    Sidebar content
</neura::sidebar>

Main Component

The main content area that scrolls independently: 
<neura::layout.main>
    Main content area
</neura::layout.main>

Collapsible Sidebar

Enable sidebar collapse functionality by setting the collapsable prop to true: 
<neura::layout variant="sidebar" :collapsable="true">
    <neura::sidebar>
        Navigation
    </neura::sidebar>
    
    <neura::layout.main>
        Content
    </neura::layout.main>
</neura::layout>
When collapsible, the sidebar state is automatically persisted in localStorage. On mobile devices, the sidebar becomes an overlay that can be toggled, while on desktop it collapses to a narrow width.

Responsive Behavior

The layout system automatically adapts to different screen sizes:
Mobile (< 768px)
Sidebar is hidden by default and can be toggled as an overlay. Header spans full width.
Tablet (768px - 1023px)
Sidebar is visible and can be collapsed. Layout adjusts automatically.
Desktop (≥ 1024px)
Full layout with sidebar and header. Collapse state is preserved.

Complete Example

A complete example using the full variant with header, sidebar, and main content: 
<neura::layout variant="full" :collapsable="true">
    <neura::layout.header>
        <div class="flex items-center justify-between w-full">
            <neura::heading level="h1" size="lg">My Application</neura::heading>
            <neura::button variant="outline">Action</neura::button>
        </div>
    </neura::layout.header>
    
    <neura::sidebar>
        <neura::navlist>
            <neura::navlist.item href="/dashboard" icon="home">Dashboard</neura::navlist.item>
            <neura::navlist.item href="/settings" icon="cog">Settings</neura::navlist.item>
        </neura::navlist>
    </neura::sidebar>
    
    <neura::layout.main>
        <div class="p-6">
            <neura::heading level="h2">Page Title</neura::heading>
            <neura::text>Your page content goes here</neura::text>
        </div>
    </neura::layout.main>
</neura::layout>

CSS Variables

The layout system uses CSS custom properties that you can customize:
  • --sidebar-width - Sidebar width (default: 16rem, collapsed: 4rem)
  • --header-height - Header height (default: 4rem)