Sidebar Blocks | Kamod UI

Choose a navigation layout that fits your application, from grouped links and nested menus to icon-only collapse, floating panels and inset sidebars. Each variant composes Sidebar primitives from @kamod-ch/ui, so you can adapt the navigation, branding and surrounding content together. Open a block to explore its responsive behavior, review the source and setup steps, then replace the sample destinations with your own routes.

Sidebar 1sidebar-01
A simple sidebar with navigation grouped by section. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
mobile
@kamod-ch/blocks/sidebar/sidebar-01
Sidebar 2sidebar-02
A sidebar with collapsible sections. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
collapsiblemobile
@kamod-ch/blocks/sidebar/sidebar-02
Sidebar 3sidebar-03
A sidebar with submenus. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
submenusmobile
@kamod-ch/blocks/sidebar/sidebar-03
Sidebar 4sidebar-04
A floating sidebar with submenus. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
floatingsubmenusmobile
@kamod-ch/blocks/sidebar/sidebar-04
Sidebar 5sidebar-05
A sidebar with collapsible submenus. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
collapsiblesubmenusmobile
@kamod-ch/blocks/sidebar/sidebar-05
Sidebar 6sidebar-06
A sidebar with submenus as dropdowns. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
dropdownsmobile
@kamod-ch/blocks/sidebar/sidebar-06
Sidebar 7sidebar-07
A sidebar that collapses to icons. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
icon modemobile
@kamod-ch/blocks/sidebar/sidebar-07
Sidebar 8sidebar-08
An inset sidebar with secondary navigation. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
insetmobile
@kamod-ch/blocks/sidebar/sidebar-08
Sidebar 9sidebar-09
Collapsible nested sidebars. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
nestedcollapsiblemobile
@kamod-ch/blocks/sidebar/sidebar-09
Sidebar 10sidebar-10
An icon-collapsible sidebar with favorites and header action menus. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
icon modedropdownsmobile
@kamod-ch/blocks/sidebar/sidebar-10
Sidebar 11sidebar-11
A sidebar with a collapsible file tree. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
file treecollapsiblemobile
@kamod-ch/blocks/sidebar/sidebar-11
Sidebar 12sidebar-12
A sidebar with a calendar. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
calendarmobile
@kamod-ch/blocks/sidebar/sidebar-12
Sidebar 13sidebar-13
A sidebar in a dialog. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
dialogmobile
@kamod-ch/blocks/sidebar/sidebar-13
Sidebar 14sidebar-14
A sidebar on the right. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
rightmobile
@kamod-ch/blocks/sidebar/sidebar-14
Sidebar 15sidebar-15
A left and right sidebar. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
dualrightmobile
@kamod-ch/blocks/sidebar/sidebar-15
Sidebar 16sidebar-16
A sidebar with a sticky site header. Adapt the sample navigation and page content to your own routes. The source includes the shared sidebar components used by this variant.
sticky headermobile
@kamod-ch/blocks/sidebar/sidebar-16

Sidebar Navigation and Layout Blocks

Sidebar 1`sidebar-01`

Sidebar 2`sidebar-02`

Sidebar 3`sidebar-03`

Sidebar 4`sidebar-04`

Sidebar 5`sidebar-05`

Sidebar 6`sidebar-06`

Sidebar 7`sidebar-07`

Sidebar 8`sidebar-08`

Sidebar 9`sidebar-09`

Sidebar 10`sidebar-10`

Sidebar 11`sidebar-11`

Sidebar 12`sidebar-12`

Sidebar 13`sidebar-13`

Sidebar 14`sidebar-14`

Sidebar 15`sidebar-15`

Sidebar 16`sidebar-16`

Sidebar 1/sidebar-01

Sidebar 2/sidebar-02

Sidebar 3/sidebar-03

Sidebar 4/sidebar-04

Sidebar 5/sidebar-05

Sidebar 6/sidebar-06

Sidebar 7/sidebar-07

Sidebar 8/sidebar-08

Sidebar 9/sidebar-09

Sidebar 10/sidebar-10

Sidebar 11/sidebar-11

Sidebar 12/sidebar-12

Sidebar 13/sidebar-13

Sidebar 14/sidebar-14

Sidebar 15/sidebar-15

Sidebar 16/sidebar-16