Header - Berrario UI Library

Component

A structural wrapper for global navigation elements, designed to be placed on each page while maintaining consistent layout and alignment.

The

Navigation - Navbar

component is nested inside the

Navigation - Header

component. Replacing or updating the layout in

Navigation - Navbar

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

Navigation - Header

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 - Navbar

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

Navigation - Header

.

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

The menu open and close behavior is controlled in the Interactions (X) panel under Navigation - Navbar Menu Open and Navigation - Navbar 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 - Header

Modes:

Base

is-alternate-mode

Note: Component is hidden to prevent overlay.

Layouts

Ready-to-use Header arrangements built from the documented elements and systems, providing structured starting points for different navigation and responsive setups.

Navbar
Prebuilt Navbar structures for different navigation needs and menu setups.

Navigation - Navbar

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

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

Navigation - Navbar

Variants:

Base

is-desktop-menu

is-tablet-menu

is-mobile-menu

is-mobile-portrait-menu

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

Navigation - Navbar

. Make any layout-specific adjustments directly in that component after selecting the desired breakpoint variant, so you can preview how the elements behave at that breakpoint in real time.

Basic

Multi-Level with Integrated Top Bar

Note: For Top Bar layouts that inherit the existing navbar-content and navbar-group behavior. This setup is designed so both the Navbar and Top Bar become part of the open menu when the menu layout becomes active at the selected breakpoint.

Multi-Level with Independent Top Bar

Note: For Top Bar layouts that use their own layout, styling, or behavior separate from the default navbar-content structure. Keep the Top Bar inside navbar-menu-hidden if it should hide when the menu layout becomes active at the selected breakpoint. To keep the Top Bar visible, move its content outside the navbar-menu-hidden wrapper.

Fixed Menu Toggle by Breakpoint

Announcement Bar
Reusable announcement layouts used to display important updates, promotions, notices, or rotating messages above the main navigation.

Navigation - Announcement Bar

Announcement text goes here...

Basic

Announcement text goes here...

Note: Single-message announcement layout used for one static update or notice.

Slider

Slide 1 text goes here...

Slide 2 text goes here...

Note: Announcement layout built with the Slider component to cycle through multiple messages within the same bar.

Elements

Header Wrapper
The main wrapper that holds the Navbar structure and controls the overall header layout.

header

Navbar
Core navigation elements used to build the main header navigation and support clear movement across the website.

navbar

Navbar Navigation (Breakpoint Variants)
The Navbar 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 in the Navbar Component.

Base

navbar-navigation

Menu Open

navbar-navigation

is-open

Menu Enter Animation

navbar-navigation

is-open

on-enter

Menu Exit Animation

navbar-navigation

is-open

on-enter

on-exit

Navbar Content (Breakpoint Variants)
The Navbar Content is the responsive menu container where transition settings can be adjusted to create the menu opening and closing animation. These animation states only become active when the selected menu breakpoint variant is active.

The dropdown menu background is controlled by the navbar-content is-open state. Edit this class combination to set the background color used when the Navbar menu is open.

Base

navbar-content

Menu Open

navbar-content

is-open

Menu Enter Animation

navbar-content

is-open

on-enter

Menu Exit Animation

navbar-content

is-open

on-enter

on-exit

Navbar Backdrop (Breakpoint Variants)
Wrapper used behind the open navbar menu to hold the modal background layer and optional close elements.

Base

navbar-backdrop

Note: Element is hidden by default.

Menu Open

navbar-backdrop

is-open

Note: Element is hidden to prevent overlay.

Menu Enter Animation

navbar-backdrop

is-open

on-enter

Note: Element is hidden to prevent overlay.

Menu Exit Animation

navbar-backdrop

is-open

on-enter

on-exit

Note: Element is hidden to prevent overlay.

Background

modal-background

Navbar Group (Breakpoint Variants)
Navbar Groups are intended to be placed within the Navbar 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.

navbar-group

Menu Visibility Elements
Elements that show or hide based on whether the navbar menu layout is active.

Menu Visible

navbar-menu-visible

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

Element is hidden by default.

Menu Hidden

navbar-menu-hidden

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

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
Button used to control the menu state, including opening, closing, and switching between active and inactive menu views.

Navigation - Navbar Menu Toggle

navbar-menu-toggle

navbar-menu-open

navbar-menu-close

mega-menu-header-close

Mega Menu Close Elements
Defines the close state of the navigation when the Mega Menu is open on smaller breakpoints. This element is placed inside the Navbar 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.

Button

mega-menu-close-navbar

Note: Elements are hidden by default.

Overlay

mega-menu-close-navbar

is-overlay

Offset
Dynamic spacing element that mirrors the live dimensions of the header 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.

header-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.

Navbar Breakpoints - User Guide

Navbar variants define how the navigation behaves across different breakpoints.

‍

The Base variant does not activate a separate menu layout. In this setup, the navigation remains visible in the same way on desktop and mobile. This is useful when the menu should not collapse into a toggle-based layout.

‍

The other variant classes define the breakpoint where the 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 navbar structure so the component can switch between a visible navigation layout and a menu-based layout. The main classes affected by these variants are navbar-navigation, navbar-content, navbar-group, navbar-menu-visible, and navbar-menu-hidden.

Interactions (X) - User Guide

The menu open and close behavior is controlled in the Interactions (X) panel under Navigation - Navbar Menu Open and Navigation - Navbar Menu Close.

‍

The menu animation is handled through class addons. Instead of animating the navbar directly with standard interaction transforms, the interactions add and remove the following classes: is-open, on-enter, and on-exit are added to navbar-navigation, navbar-content, and navbar-backdrop.

‍

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.