Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add aside

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::aside> renders a semantic <aside> — the complementary landmark — for content that supports the main content without being part of it: filters, a table of contents, a summary panel.

It is full width on small screens and takes a fixed width from the lg breakpoint up, so a narrow viewport stacks it above or below the content instead of squeezing both.

Basic Usage

<x-aura::aside>
    <div class="rounded-lg border border-aura-surface-200 p-4 text-sm">Filters</div>
</x-aura::aside>
<div class="flex gap-6">
    <x-aura::main>…</x-aura::main>
    <x-aura::aside>
        <h2>Filters</h2>
    </x-aura::aside>
</div>

Props

Prop Type Default Description
width string 'md' Width from lg up: sm (14rem), md (16rem), lg (20rem).
sticky bool false Keep the panel in view while the main content scrolls.

Sticky

A sticky aside is right for a table of contents or a running summary; it is wrong for anything taller than the viewport, which becomes unreachable.

<x-aura::aside sticky width="lg">
    <h2>On this page</h2>
</x-aura::aside>

Accessibility

<aside> is a landmark, so keep it for genuinely complementary content. A layout column that merely happens to be on the side is a <div>.