Open Sidebar

Tailwind CSS Drawer - Nira UI

Drawer component in Nira UI allows you to display a sliding panel that can contain menus, lists, or any other content.

Default Drawer

Use the default drawer to display content that slides from the left side of the screen. Users can open or close it by clicking on the menu button.

Drawer Left

place content


 
    
    Open Drawer
    
    
      
        Drawer
         place content

The right drawer slides in from the right side, perfect for secondary menus or additional content panels.

Drawer Right

Slides in from the right.


   
    
    Drawer Right


    


    
      
        Drawer Right
        Slides in from the right.
        x

The top drawer slides down from the top, ideal for notifications, alerts, or quick-access menus.

Drawer Top

Slides in from the top.


 
    
    Drawer Top

    

    
      
        Drawer Top
        Slides in from the top.

The bottom drawer slides up from the bottom, commonly used for mobile menus or action panels.

Drawer Bottom

Slides in from the bottom.


   
    
    Drawer Bottom

    

    
      
        Drawer Bottom
        Slides in from the bottom.

Breadcrumb

Dropdown