Main

The main container used to wrap the content. It includes a sidebar on the left side of the page that contains a list of all the pages in the documentation. The main content is displayed on the right side of the page.

Basic Usage

Copy to clipboard

<aura:main>
    <!-- Main content goes here -->
</aura:main>

Sections

The main layout has the following sections available:

title: The title of the page and the main heading.
page-title: Overrides the visible title of the page.
back: Adds a back button to the page. Requires a url attribute.
breadcrumbs: The breadcrumbs section of the page.
actions: The actions section of the page.
header: The header section of the page.
tabs: Navigation tabs for the page.
tabs-dropdown: A dropdown menu on the tabs section.

Full Example

Copy to clipboard

@section('title', 'Hello World')
@section('page-title', 'Hello There')

@section('back', route('home'))

@section('breadcrumbs')
    <x-aura::breadcrumb.item ... />
    <x-aura::breadcrumb.item ... />
@endsection

@section('actions')
    <aura:button ... />
    <aura:button ... />
    <aura:button ... />
@endsection

@section('header')
    <aura:card>
        <!-- Card content goes here -->
    </aura:card>
@endsection

@section('tabs')
    <aura:tab.button ... />
    <aura:tab.button ... />
    <aura:tab.button ... />
@endsection

@section('tabs-dropdown')
    <aura:dropdown.button ... />
    <aura:dropdown.button ... />
    <aura:dropdown.button ... />
@endsection

Home