Sidebar - Domma Showcase

Features

Unlimited Nesting

Recursive submenu rendering supports infinite depth with proper indentation and animations.

Mobile Responsive

Slide-out drawer with overlay on mobile devices. Configurable breakpoint.

State Persistence

Remember expanded submenus using localStorage for seamless user experience.

Flexible Positioning

Fixed or static positioning, left or right alignment, custom width and top offset.

Getting Started

Add a sidebar to your page in three simple steps

Step 1: Add HTML Container

Add an <aside> element to your page where you want the sidebar to appear:


<aside id="my-sidebar"></aside>

<main class="content">
    <!-- Your page content -->
</main>

Step 2: Include Domma

Add Domma CSS and JavaScript to your page:


<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

<!-- JavaScript -->
<script src="dist/domma.min.js"></script>

Step 3: Initialize the Sidebar

Call Domma.elements.sidebar() with your navigation items:


Domma.elements.sidebar('#my-sidebar', {
    items: [
        { text: 'Home', url: '/', icon: 'home' },
        { text: 'About', url: '/about', icon: 'info' },
        { text: 'Contact', url: '/contact', icon: 'mail' }
    ]
});

Note: The sidebar component will automatically generate all HTML structure, styling, and interactivity. You only need to provide the empty container element and configuration options.

Basic Example

A simple sidebar with icon navigation

Main Content Area

The sidebar is fixed to the left. Try clicking the navigation items!

JavaScript


const sidebar = Domma.elements.sidebar('#sidebar-basic', {
    position: 'left',
    fixed: true,
    width: '250px',
    top: '60px',
    header: {
        title: 'Navigation',
        toggle: true
    },
    items: [
        { text: 'Dashboard', url: '#dashboard', icon: 'layout', section: 'dashboard' },
        { text: 'Users', url: '#users', icon: 'users', section: 'users' },
        { text: 'Settings', url: '#settings', icon: 'settings', section: 'settings' }
    ],
    variant: 'dark',
    activeSection: 'dashboard'
});

Nested Menus

Unlimited depth with collapsible submenus

Multi-Level Navigation

Click on items with arrows to expand/collapse submenus. The component supports unlimited nesting depth.

JavaScript


const sidebar = Domma.elements.sidebar('#sidebar-nested', {
    items: [
        { text: 'Dashboard', url: '#', icon: 'layout' },
        {
            text: 'Products',
            icon: 'box',
            items: [
                { text: 'All Products', url: '#products' },
                { text: 'Categories', url: '#categories' },
                {
                    text: 'Advanced',
                    items: [
                        { text: 'Import', url: '#import' },
                        { text: 'Export', url: '#export' }
                    ]
                }
            ]
        },
        { divider: true },
        { heading: 'SYSTEM' },
        { text: 'Settings', url: '#settings', icon: 'settings' }
    ]
});

Navigation with Badges

Add badges to show counts or status

Notification Badges

Badges can display counts, status, or notifications.

JavaScript


Domma.elements.sidebar('#sidebar-badges', {
    items: [
        { text: 'Inbox', url: '#inbox', icon: 'mail', badge: '12' },
        { text: 'Notifications', url: '#notifications', icon: 'bell', badge: '3' },
        { text: 'Messages', url: '#messages', icon: 'message-square', badge: '99+' }
    ]
});

Light Theme Variant

Switch between light and dark themes

Light Sidebar Theme

The sidebar component adapts to light or dark theme variants.

JavaScript


Domma.elements.sidebar('#sidebar-light', {
    variant: 'light',  // or 'dark'
    items: [/* ... */]
});

State Persistence

Remember expanded menus across page reloads

Persistent State

Expand some menus, then reload the page. The expanded state will be remembered!

JavaScript


Domma.elements.sidebar('#sidebar-persist', {
    persistExpanded: true,
    persistKey: 'my-app-sidebar',  // Unique key for this sidebar
    items: [/* ... */]
});

API Reference

Options

Option	Type	Default	Description
`position`	String	'left'	'left' or 'right'
`fixed`	Boolean	true	Fixed or static positioning
`width`	String	'250px'	Sidebar width
`top`	String	'0'	Top offset (e.g., '60px' for navbar)
`header`	Object	null	{ title, toggle, icon }
`items`	Array	[]	Navigation items
`footer`	Object	null	{ text, html }
`variant`	String	'dark'	'light' or 'dark'
`collapsible`	Boolean	true	Mobile toggle behaviour
`collapseAt`	Number	768	Breakpoint (px)
`push`	Boolean	true	Push content instead of overlay when sidebar opens
`contentSelector`	String	'.main-content'	CSS selector for content element to push (when push: true)
`activeSection`	String	null	Current active section
`persistExpanded`	Boolean	false	Persist expanded state
`persistKey`	String	null	localStorage key

Methods

Method	Description
`open()`	Open sidebar (mobile)
`close()`	Close sidebar (mobile)
`toggle()`	Toggle sidebar (mobile)
`isOpen()`	Check if sidebar is open
`setActive(section)`	Set active section
`setItems(items)`	Replace all items
`addItem(item, index)`	Add item at index
`removeItem(index)`	Remove item at index
`expandAll()`	Expand all submenus
`collapseAll()`	Collapse all submenus

Configuration Engine Integration

Use $.setup() for declarative initialization


$.setup({
    '#my-sidebar': {
        component: 'sidebar',
        options: {
            variant: 'dark',
            items: [
                { text: 'Home', url: '/', icon: 'home' },
                { text: 'About', url: '/about', icon: 'info' }
            ],
            activeSection: 'home'
        }
    }
});