Sidebar - Berrario UI Library

Component

A structural layout region that contains side-based navigation and supports consistent positioning and alignment across the interface.

The

Navigation - Sidenav

component is nested inside the

Navigation - Sidebar

component. Replacing or updating the layout in

Navigation - Sidenav

will automatically update the Navbar structure inside the Header. Set the required Navbar variant directly in the

Navigation - Sidebar

component so its breakpoint and menu behavior remain correctly configured globally.

Use the Logo component with its Base and is-alternate variants. Add the Logo component as a property inside

Navigation - Sidenav

, then create a conditional that switches the logo to is-alternate when is-alternate-mode is selected on

Navigation - Sidebar

.

The current logo already includes this conditional setup. If you replace it with a different Logo component and want to use the alternate Sidebar mode, recreate the same conditional for the new logo.

The Sidebar menu open and close behavior is controlled in the Interactions (X) panel under Navigation - Sidenav Menu Open and Navigation - Sidenav Menu Close. Menu animations are controlled by adding and removing class addons instead of using standard interaction transforms. This keeps the structure safer for nested components, such as mega menus, and prevents them from being visually confined by animated parent elements. Detailed setup instructions are available in the User Guide below.

Navigation - Sidebar

Modes:

Base

is-alternate-mode

Note: Component is hidden to prevent overlay.

Layouts

Ready-to-use Sidebar arrangements built from the documented elements and structure, providing starting points for different navigation, content, and responsive setups.

Navigation - Sidenav

variants control when the menu layout becomes active across breakpoints.The Base variant keeps the sidenav visible in the same way across desktop and mobile, without switching to the menu layout. The other menu variants define where the menu layout starts, such as desktop, tablet, mobile, or mobile portrait.

A separate set of bottom variants defines the breakpoint where the sidenav changes from a side position to a bottom position. This allows the same component to adapt its placement across different screen sizes without changing the underlying structure.

These variants adjust the default styles of the main sidenav classes: sidenav, sidenav-layout, sidenav-navigation, sidenav-content, sidenav-group, sidenav-breakpoint-visible, sidenav-breakpoint-hidden, sidenav-menu-visible, and sidenav-menu-hidden.

Navigation - Sidenav

Variants:

Base

is-desktop-bottom

is-tablet-bottom

is-mobile-bottom

is-mobile-portrait-bottom

is-desktop-menu

is-tablet-menu

is-mobile-menu

is-mobile-portrait-menu

Note: Component is hidden to prevent overlay.

Choose the desired layout from the options below and use it to replace the existing layout inside

Navigation - Sidenav

. After selecting the required variant, make any layout-specific adjustments directly in that component so you can preview how the elements behave at each breakpoint in real time.

Multi-Level & Expanded

Elements

Sidebar
The main wrapper for the sidebar system. It holds the sidebar structure and keeps the navigation layout organized within the page.

sidebar

Note: Element is hidden to prevent overlay.

Sidenav
Main wrapper for the sidenav system. It contains the sidenav-layout element.

sidenav

Sidenav Layout
Main internal layout wrapper that holds all sidenav elements, including the navigation, content, backdrop, visibility controls, and expand or collapse elements.

sidenav-layout

Sidenav Interaction Elements
Elements used to trigger the sidenav expand and collapse states.

On Click

sidenav-expand

sidenav-collapse

Note: Element is hidden by default.

On Hover

sidenav-expand

i-hover

Note: Element is hidden by default.

sidenav-collapse

i-hover

Note: Element is hidden by default.

Sidenav Navigation
The Sidenav Navigation is the responsive navigation container that switches to a toggle-based layout at the breakpoint of your choosing. To activate the toggle-based navigation, simply select the appropriate variant of the Sidenav Component.

Base

sidenav-navigation

Menu Open

sidenav-navigation

is-open

Menu Enter Animation

sidenav-navigation

is-open

on-enter

Menu Exit Animation

sidenav-navigation

is-open

on-enter

on-exit

Sidenav Backdrop
Wrapper used behind the open sidenav menu to hold the modal background layer and optional close elements.

Base

sidenav-backdrop

Note: Element is hidden by default.

Background

modal-background

Sidenav Content
Container used to hold the sidenav content and define how it adapts across breakpoints.

sidenav-content

Sidenav Group
Sidenav Groups are intended to be placed within the Sidenav Content to separate logical groups of elements such as buttons, links, poppers, or text blocks. These groups provide structural grouping and can be styled independently to adapt their layout, alignment, and stacking behavior across breakpoints.

sidenav-group

Sidenav Label Animation
Controls the animation of sidenav labels, enabling smooth transitions based on interaction and layout changes.

animation-sidenav-label

Visibility Elements
Elements that change visibility when the selected breakpoint setup or sidenav menu layout becomes active.

Breakpoint Visible

sidenav-breakpoint-visible

Note: Use this for elements that should appear when the chosen breakpoint becomes active.

Element is hidden by default.

Breakpoint Hidden

sidenav-breakpoint-hidden

Note: Use this for elements that should be hidden when the chosen breakpoint becomes active.

Menu Visible

sidenav-menu-visible

Note: Use for elements that should appear when the menu layout is active.

Element is hidden by default.

Menu Hidden

sidenav-menu-hidden

Note: Use for elements that should be hidden when the menu layout is active.

Sidenav Animation
Supports smooth transitions across interactions and layout changes.

Expanded

animation-sidenav-expanded

Collapsed

animation-sidenav-collapsed

Brand Home Link
Navigation home-link element used to display the brand logo and control its hover and current-page states. The logo can also be placed inside a button-style option when that treatment is preferred for the navigation.

Custom

brand-home-link

media-height-*

Navigation - Logo *

Note: Customize the hover and current-page states directly on the brand-home-link class to control how the brand home link responds across the navigation.

Button

button

media-height-*

Navigation - Logo *

Menu Toggle
The Menu Toggle controls the visibility of the responsive navigation.

Navigation - Sidenav Menu Toggle

sidenav-menu-toggle

sidenav-menu-open

sidenav-menu-close

Show When Menu Is Open

sidenav-show-on-menu-open

Note: Use for elements that should appear when the menu opens.
‍
Element is hidden by default.

Hide When Menu Is Open

sidenav-hide-on-menu-open

Note: Use for elements that should be hidden when the menu opens.

Mega Menu Close
Defines the close state of the navigation when the Mega Menu is open on smaller breakpoints. This element is placed inside the Sidenav Menu Toggle and becomes visible once the menu is expanded, allowing users to clearly exit the navigation. It replaces or complements the default toggle state to maintain a consistent and intuitive interaction.
‍
The close element is nested within this structure to give additional control over positioning and behavior. This allows you to apply predefined addon classes and adjust placement as needed, ensuring the close button can align with different layouts while remaining consistent within the system.

mega-menu-close-sidenav

Note: Elements are hidden by default.

Offset
Dynamic spacing element that mirrors the live dimensions of the sidebar to keep related layouts and navigation structures aligned as the interface changes. It uses pointer-events: none so it does not interfere with other elements.

sidenav-offset

Custom Behavior -

Header & Sidebar

Offset

This behavior keeps offset elements synchronized with the live size of the header and sidenav.

Offset elements are used as spacing references for layouts, navigation systems, and menu structures that need to account for fixed or persistent UI areas. Instead of manually setting spacing values, the offset elements use the current width and height of their matching source element as minimum dimensions.

The header-offset elements copy the live width and height of the header and apply them as min-width and min-height.

The sidenav-offset elements copy the live width and height of the sidenav and apply them as min-width and min-height.

This helps related elements stay aligned when the header or sidenav changes size across breakpoints, responsive states, interactions, or dynamic content updates.

The behavior updates on page load, resize, orientation change, content changes, class changes, style changes, hidden-state changes, and live element size changes. This keeps the offsets accurate even when the layout changes after the page has already loaded.

Use this behavior when a layout, menu, or spacing element needs to reserve at least the same space as the header or sidenav without relying on fixed values.

Mega Menu Close Sync

This behavior keeps the navbar and sidenav mega menu close elements synchronized with the open state of their matching mega menus.

The mega-menu-close-navbar and mega-menu-close-sidenav elements are hidden by default. When a matching mega menu is open, the correct close element is shown as flex. When no matching mega menu is open, the close element is hidden again.

The behavior checks each mega-menu for open states, aria-expanded states, and visible navigation panels. This allows the close element to stay accurate even when the menu state is controlled by Interactions (X), dropdown behavior, keyboard actions, or responsive layout changes.

The navbar close element responds to mega menus that contain mega-menu-navigation-navbar.

The sidenav close element responds to mega menus that contain mega-menu-navigation-sidenav.

The behavior updates after clicks, mouse actions, touch actions, keyboard actions, resize events, and class, style, or aria-expanded changes.

Use this behavior when a shared close element needs to appear only while a navbar or sidenav mega menu is open.

This custom behavior is placed inside the

Global

component so updates can be managed from a single central location. If you add or adjust customizations inside the

Custom Behavior - Header & Sidebar

component, the changes will apply consistently across the site.

Sidenav Breakpoints - User Guide

Sidenav variants define how the sidenav behaves across different breakpoints.

‍

The Base variant keeps the sidenav in its default side layout. In this setup, the sidenav does not switch to a bottom layout or a toggle-based menu layout.

‍

The bottom variant classes define the breakpoint where the sidenav layout moves to the bottom of the viewport:

is-desktop-bottom- The bottom layout is active from desktop and below.

is-tablet-bottom- The bottom layout becomes active from tablet and below.

is-mobile-bottom- The bottom layout becomes active from mobile landscape and below.

is-mobile-portrait-bottom- The bottom layout becomes active only from mobile portrait and below.

‍

The menu variant classes define the breakpoint where the sidenav menu layout becomes active:

is-desktop-menu- The menu layout is active from desktop and below.

is-tablet-menu- The menu layout becomes active from tablet and below.

is-mobile-menu- The menu layout becomes active from mobile landscape and below.

is-mobile-portrait-menu- The menu layout becomes active only from mobile portrait and below.

‍

These variant classes change the default styling of the main sidenav structure so the component can switch between a side layout, a bottom layout, and a menu-based layout. The main classes affected by these variants are: sidenav, sidenav-layout, sidenav-navigation, sidenav-content, sidenav-group, sidenav-breakpoint-visible, sidenav-breakpoint-hidden, sidenav-menu-visible, and sidenav-menu-hidden.

Interactions (X) - User Guide

The menu animation is handled through class addons. Instead of animating the sidenav directly with standard interaction transforms, the interactions add and remove the following classes:

is-open, on-enter, and on-exit are added to sidenav-navigation when needed.

‍

The is-open class controls the open state. If no additional animation classes are used, is-open simply shows or hides the element.

When animation classes are used, is-open sets the starting structure for the animation, including the initial position. The on-enter class controls the opening animation, while on-exit controls the closing animation.

The on-exit class is added while is-open and on-enter are still active. This allows the closing animation to start from the same position where the opening animation finished.

Do not replace on-enter with on-exit immediately. If on-enter is removed before on-exit starts, the element may snap back to its original state instead of closing smoothly.

Once the on-exit animation is finished, the transition timing in the addon class should match the delay set in the interaction. After that delay, is-open, on-enter, and on-exit should all be removed together. This keeps the full animation sequence smooth from open to close.

‍

This class-based animation setup is used because traditional interaction-based transforms can affect parent and nested elements in ways that limit functionality. For example, nested components such as mega menus may no longer display full screen if their parent elements are transformed by interactions. Adding and removing classes is safer because it allows the menu to animate while keeping nested components free to behave correctly.