maryUI

Sidebar

This component only works with the main layout component.

Attributes 

<x-slot:sidebar
    drawer="main-drawer"          {{-- Drawer ID trigger for mobile --}}
    collapsible                   {{-- Make it collapsible --}}
    collapse-text="Hide it"       {{-- Custom collapsible text --}}
    class="bg-base-100"           {{-- Any Tailwind class--}}
    right                         {{-- Move it to the right side --}}
    right-mobile                  {{-- Move the drawer to the right side only for mobile devices --}}
>
    ...
</x-slot:sidebar>

Right side

By default, the sidebar is on the left side. But you can easily move it to the right side by adding the right attribute. 

<x-main>
    <x-slot:sidebar ... right>
        ...
    </x-slot:sidebar>
</x-main>

The following example shows how to move the sidebar (the drawer) to the right side only for mobile devices. 

<x-main>
    <x-slot:sidebar ... right-mobile>
        ...
    </x-slot:sidebar>
</x-main>
maryUI
Sponsor