SmartMenus Documentation

Quick start

Lauch the SmartMenus Configurator that allows configuring and testing the layout and behavior of your SmartMenus navbar(s).

SmartMenus Configurator

At any time while using the configurator, you can click the “View code” button which will provide you with code samples and simple install/init instructions for the script.

Once you have configured the layout and behavior of your navbar(s) using the configurator tool, you will probably need to tweak the default theme (typography, colors, etc.) so go on and take a look at the theme section in the docs for info and a list of all available variables that you could customize.

This should be enough info for a “Quick start” section but keep in mind that currently the configurator tool does not support some of the advanced configuration options (e.g. setting any of the available data-* attributes, etc.) so if you need further tweaks, feel welcome to dive into the rest of the documentation.

Installation and setup

Install

Node

npm install smartmenus

Browser

Download the latest release ZIP from:
https://github.com/vadikom/smartmenus/releases
and copy the dist folder found in packages/smartmenus/dist.
Or use a CDN - for example:
https://www.unpkg.com/browse/smartmenus@2.0.0-alpha.1/dist/

Basic setup

The SmartMenus Configurator will automatically provide you with dynamically updated code samples and instructions based on your configuration.

HTML

<!-- Navbar 1 -->
<nav id="navbar1" class="sm-navbar">
  <h1 class="sm-brand"><a href="#">Navbar 1</a></h1>

  <span class="sm-toggler-state" id="sm-toggler-state-1"></span>
  <div class="sm-toggler">
    <a class="sm-toggler-anchor sm-toggler-anchor--show" href="#sm-toggler-state-1" role="button" aria-label="Open main menu">
      <span class="sm-toggler-icon sm-toggler-icon--show"></span>
    </a>
    <a class="sm-toggler-anchor sm-toggler-anchor--hide" href="#" role="button" aria-label="Close main menu">
      <span class="sm-toggler-icon sm-toggler-icon--hide"></span>
    </a>
  </div>

  <div class="sm-collapse">
    <ul class="sm-nav">
      <li class="sm-nav-item"><a class="sm-nav-link" href="#">Link</a></li>
      <li class="sm-nav-item"><a class="sm-nav-link" href="#">Link</a></li>
      <li class="sm-nav-item">
        <a class="sm-nav-link sm-sub-toggler" href="#">Sub</a>
        <ul class="sm-sub">
          <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
          <li class="sm-sub-item">
            <a class="sm-sub-link sm-sub-toggler" href="#">Sub</a>
            <ul class="sm-sub">
              <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
              <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
              <li class="sm-sub-item">
                <a class="sm-sub-link sm-sub-toggler" href="#">Sub</a>
                <ul class="sm-sub">
                  <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
                  <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
                  <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
                </ul>
              </li>
              <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
            </ul>
          </li>
          <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
          <li class="sm-sub-item-separator"></li>
          <li class="sm-sub-item"><a class="sm-sub-link sm-disabled" href="#">Disabled</a></li>
        </ul>
      </li>
      <li class="sm-nav-item"><a class="sm-nav-link" href="#">Link</a></li>
      <li class="sm-nav-item"><a class="sm-nav-link" href="#">Link</a></li>
      <li class="sm-nav-item">
        <a class="sm-nav-link sm-nav-link--split" href="#">Link</a
        ><button class="sm-nav-link sm-nav-link--split sm-sub-toggler" aria-label="Toggle sub menu"></button>
        <ul class="sm-sub">
          <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
          <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
          <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
          <li class="sm-sub-item">
            <a class="sm-sub-link sm-sub-link--split" href="#">Link</a
            ><button class="sm-sub-link sm-sub-link--split sm-sub-toggler" aria-label="Toggle sub menu"></button>
            <ul class="sm-sub">
              <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
              <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
              <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
              <li class="sm-sub-item">
                <a class="sm-sub-link sm-sub-link--split" href="#">Link</a
                ><button class="sm-sub-link sm-sub-link--split sm-sub-toggler" aria-label="Toggle sub menu"></button>
                <ul class="sm-sub">
                  <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
                  <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
                  <li class="sm-sub-item"><a class="sm-sub-link" href="#">Link</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="sm-nav-item"><a class="sm-nav-link" href="#">Link</a></li>
      <li class="sm-nav-item sm-nav-item--has-mega">
        <a class="sm-nav-link sm-sub-toggler" href="#">Mega</a>
        <div class="sm-sub sm-sub--mega">
          <div style="border: 1px dashed rgba(0, 0, 0, 0.3); padding: 1rem">
            <p>Mega subs will take the full width/height of the navbar based on its orientation.</p>
            <p>You can include any HTML content in a mega sub.</p>
            <p>Please note that the <code>dropdownsKeepInViewport</code> option has no effect for mega subs.</p>
          </div>
        </div>
      </li>
      <li class="sm-nav-item-separator"></li>
      <li class="sm-nav-item"><a class="sm-nav-link sm-disabled" href="#">Disabled</a></li>
    </ul>
  </div>
</nav>

CSS

The dist/css folder contains a number of pre-compiled stylesheets optimized for different scenarios. The Which stylesheet to use? section in the docs includes info that will help you choose the right one for your use-case.

Node (Webpack, Vite, etc.)

You can use either SASS or CSS.

SASS

Create you own customization file:

// smartmenus-custom.scss

// any SASS variables here...

@import "../node_modules/smartmenus/src/css/smartmenus.scss";

// any customization styles here...

Import your customization file:

import './smartmenus-custom.scss'

CSS

Create you own customization file:

/* smartmenus-custom.css */

@import url("../node_modules/smartmenus/dist/css/smartmenus.css");

/* any customization styles here... */

Import your customization file:

import './smartmenus-custom.css'

Browser

Create you own customization file:

/* smartmenus-custom.css */

/* any customization styles here... */

Include the CSS files on your page:

<link href="dist/css/smartmenus.min.css" rel="stylesheet" />
<link href="smartmenus-custom.css" rel="stylesheet" />

JS

Node (ESM)

import SmartMenus from 'smartmenus'

// Navbar 1
const navbar1 = new SmartMenus(document.querySelector('#navbar1')/* , { anyScriptOption: value, ... } */)

Browser

Create you own init file:

// smartmenus-init.js

// Navbar 1
const navbar1 = new SmartMenus(document.querySelector('#navbar1')/* , { anyScriptOption: value, ... } */)

Include the JS files on your page:

<script src="dist/js/smartmenus.browser.min.js"></script>
<script src="smartmenus-init.js"></script>

Style

Introduction

The styles are split into two logical parts - layout and theme related. The layout styles provide support for the layout of all the components so they are practically mandatory to use. The theme styles cover only the look (typography, colors, etc.) and are basically optional and easier to replace with your own rules if for some reason you prefer not to use the default theme (e.g. you consider it too bloated for your use-case).

Layout

Responsiveness

By default the layout styles use a single viewport breakpoint which switches the nav tree from collapsible mode (on small screens) to dropdowns mode (on large screens). The following SASS variables control the breakpoint:

// packages/smartmenus/src/css/variables/_layout.scss

$vp-large-min:      768px !default;
$vp-small-max:      $vp-large-min - 0.02 !default;

If you need only collapsible or only dropdown sub menus on all screen sizes for a navbar, you can override the default responsive behavior by using .sm-navbar--collapsible-only or .sm-navbar--dropdowns-only.

Use only collapsible mode on all screen sizes:

<nav class="sm-navbar sm-navbar--collapsible-only">

Use only dropdowns mode on all screen sizes:

<nav class="sm-navbar sm-navbar--dropdowns-only">

A similar logic depending on the same single breakpoint is used to differ between small screen view and large screen view for other layout features too. For example, the following will result in a navbar with offcanvas on small screen devices:

<nav class="sm-navbar sm-navbar--offcanvas-left">

but if you add .sm-navbar--offcanvas-only, it would result in a navbar with offcanvas on all screen sizes:

<nav class="sm-navbar sm-navbar--offcanvas-left sm-navbar--offcanvas-only">

For details, please check the individual navbar variants.

Components

Navbar

.sm-navbar
The main navbar element. Usually a <nav> element.
Related layout variables:

$navbar-z-index: 9999;

.sm-navbar {
  --sm-navbar-z-index: 9999;
}

Variants:

Sticky top navbar

.sm-navbar--sticky-top
Navbar with position: sticky applied that will stick to the top.
Related layout variables:
```
$navbar-sticky-top-offset: 0;
```
```
.sm-navbar {
  --sm-navbar-sticky-top-offset: 0;
}
```
Sticky bottom navbar

.sm-navbar--sticky-bottom
Navbar with position: sticky applied that will stick to the bottom.
Related layout variables:
```
$navbar-sticky-bottom-offset: 0;
```
```
.sm-navbar {
  --sm-navbar-sticky-bottom-offset: 0;
}
```
Fixed top navbar

.sm-navbar--fixed-top
Navbar with position: fixed applied that will stay fixed to the top.
Fixed bottom navbar

.sm-navbar--fixed-bottom
Navbar with position: fixed applied that will stay fixed to the bottom.

Offcanvas left navbar

.sm-navbar--offcanvas-left
Navbar with offcanvas left content on small screen devices.
Related layout variables:

$offcanvas-width: 300px;
$offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);

.sm-navbar {
  --sm-offcanvas-width: 300px;
  --sm-offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);
}

Offcanvas right navbar

.sm-navbar--offcanvas-right
Navbar with offcanvas right content on small screen devices.
Related layout variables:

$offcanvas-width: 300px;
$offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);

.sm-navbar {
  --sm-offcanvas-width: 300px;
  --sm-offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);
}

Offcanvas top navbar

.sm-navbar--offcanvas-top
Navbar with offcanvas top content on small screen devices.
Related layout variables:
```
$offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);
```
```
.sm-navbar {
  --sm-offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);
}
```
Offcanvas bottom navbar

.sm-navbar--offcanvas-bottom
Navbar with offcanvas bottom content on small screen devices.
Related layout variables:
```
$offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);
```
```
.sm-navbar {
  --sm-offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);
}
```
Offcanvas only navbar

.sm-navbar--offcanvas-only
Navbar with offcanvas content on all screen sizes devices.
Sidebar left navbar

.sm-navbar--sidebar-left
Sidebar left navbar on large screen devices. You will probably need to apply respective side margin/padding to your page content to provide space for the sidebar.
Related layout variables:
```
$navbar-sidebar-width: 300px;
```
```
.sm-navbar {
  --sm-navbar-sidebar-width: 300px;
}
```
Sidebar right navbar

.sm-navbar--sidebar-right
Sidebar right navbar on large screen devices. You will probably need to apply respective side margin/padding to your page content to provide space for the sidebar.
Related layout variables:
```
$navbar-sidebar-width: 300px;
```
```
.sm-navbar {
  --sm-navbar-sidebar-width: 300px;
}
```
Sidebar centered navbar

.sm-navbar--sidebar-centered
Sidebar navbar on a page with centered layout. You will probably need to apply respective side margin/padding to your page content to provide space for the sidebar.
Related layout variables:
```
$navbar-sidebar-centered-layout-max-width: 1200px;
```
```
.sm-navbar {
  --sm-navbar-sidebar-centered-layout-max-width: 1200px;
}
```
Sidebar only navbar

.sm-navbar--sidebar-only
Sidebar navbar on all screen sizes devices. You will probably need to apply respective side margin/padding to your page content to provide space for the sidebar.
Vertical navbar

.sm-navbar--vertical
Vertical navbar that will take the full width of its parent element.
Inline navbar

.sm-navbar--inline
Inline navbar that will be aligned according to the parent element’s text-align style.
Collapsible only navbar

.sm-navbar--collapsible-only
Use only collapsible mode on all screen sizes devices (by default you get dropdowns on large screen devices and collapsible on small screen devices).
Dropdowns only navbar

.sm-navbar--dropdowns-only
Use only dropdowns on all screen sizes devices (by default you get dropdowns on large screen devices and collapsible on small screen devices).
Drop reverse y navbar

.sm-navbar--drop-reverse-y
Make the subs drop up instead of drop down from their parent item.
Drop reverse x navbar

.sm-navbar--drop-reverse-x
Make the subs drop left instead of drop right from their parent item (and the opposite on right-to-left pages).

Container

.sm-container
Container element that can be used to constrain the width of the navbar content.
Related layout variables:

$container-max-width: 960px;

.sm-navbar {
  --sm-container-max-width: 960px;
}

Toggler: .sm-toggler
The .sm-toggler is used for toggling the visibility of a .sm-collapse or an .sm-offcanvas element inside the navbar. It must be a previous sibling to either of those elements.

Collapse

.sm-collapse
The .sm-collapse container element can be used to toggle the visibility of the content inside it. It is normally used for the .sm-nav element but you can put any other content inside it. It requires a previous sibling .sm-toggler element in the source.
Related layout variables:

$collapse-max-height: calc(100vh - 70px);
$collapse-show-animation: sm-ani-collapse 0.25s ease-in;
$collapse-hide-animation: sm-ani-collapse 0.25s ease-in reverse;

.sm-navbar {
  --sm-collapse-max-height: calc(100vh - 70px);
  --sm-collapse-show-animation: sm-ani-collapse 0.25s ease-in;
  --sm-collapse-hide-animation: sm-ani-collapse 0.25s ease-in reverse;
}

Offcanvas: .sm-offcanvas
Any content you put inside an .sm-offcanvas container element will be displayed in a toggleable offcanvas. It is normally used for the .sm-nav element but you can put any other content inside it. It requires a previous sibling .sm-toggler element in the source,

Offcanvas Overlay: .sm-offcanvas-overlay
An empty element that simply creates the translucent overlay beneath an offcanvas. Should be used only in combination with an .sm-offcanvas element.

Brand: .sm-brand
Can be used to display a branding text or logo image. Usually a heading element (e.g. <h1>).

Nav

.sm-nav
The .sm-nav element represents your navigation tree structure. Usually a <ul> element with unlimited levels of sub <ul> elements.

Variants:

Left nav

.sm-nav--left
Left-aligned nav.
Center nav

.sm-nav--center
Center-aligned nav.
Right nav

.sm-nav--right
Right-aligned nav.
Fill nav

.sm-nav--fill
Full-width nav with proportional-width items that fill all the space.
Justify nav

.sm-nav--justify
Full-width nav with equal-width items that fill all the space.

Nav Item: .sm-nav-item
The container (wrapper) element of a .sm-nav-link element and its .sm-sub element (if it has a sub).

Nav Item Separator: .sm-nav-item-separator
An empty element that creates a separator between two .sm-nav-item elements.

Nav Link

.sm-nav-link
The link element of a .sm-nav-item element.

Variants:

Split nav link

.sm-nav-link--split
Split .sm-nav-link that has a separate .sm-sub-toggler button.

Sub Toggler: .sm-sub-toggler
Adding the .sm-sub-toggler class to any .sm-nav-link or .sm-sub-link element will make it display a sub indicator caret.

Sub

.sm-sub
A sub element that is part of the navigation tree structure. Usually a <ul> element with unlimited levels of sub <ul> elements. It must be an adjacent element in the DOM to its related .sm-nav-link/.sm-sub-link element and usually both are direct children of their related .sm-nav-item/.sm-sub-item element.
Related layout variables:

$sub-min-width: 12em;
$sub-collapsible-show-animation: sm-ani-collapse 0.25s ease-in;
$sub-collapsible-hide-animation: sm-ani-collapse 0.25s ease-in reverse;
$sub-dropdowns-show-animation: none;
$sub-dropdowns-hide-animation: sm-ani-fade 0.25s ease-in reverse;

.sm-navbar {
  --sm-sub-min-width: 12em;
  --sm-sub-collapsible-show-animation: sm-ani-collapse 0.25s ease-in;
  --sm-sub-collapsible-hide-animation: sm-ani-collapse 0.25s ease-in reverse;
  --sm-sub-dropdowns-show-animation: none;
  --sm-sub-dropdowns-hide-animation: sm-ani-fade 0.25s ease-in reverse;
}

Variants:

Mega sub

.sm-sub--mega
Mega subs will take the full width/height of the navbar based on its orientation.

You can include any HTML content in a mega sub.

Please note that the dropdownsKeepInViewport script option has no effect for mega subs.

Sub Item: .sm-sub-item
The container (wrapper) element of a .sm-sub-link element and its .sm-sub element (if it has a sub).

Sub Item Separator: .sm-sub-item-separator
An empty element that creates a separator between two .sm-sub-item elements.

Sub Link

.sm-sub-link
The link element of a .sm-sub-item element.

Variants:

Split sub link

.sm-sub-link--split
Split .sm-sub-link that has a separate .sm-sub-toggler button.

Utility classes

.sm-hide-small
Hide content on small screen.

.sm-hide-large
Hide content on large screen.

Layout variables

Most of the layout related variables have both a SASS and a respective CSS version. The CSS variables are scoped to .sm-navbar by default (the scope can be changed via the $var-scope SASS variable).

A notable exception are the variables that control the breakpoint $vp-large-min/$vp-small-max which, unfortunately, are still SASS-only due to no native CSS alternative being widely supported for now.

// packages/smartmenus/src/css/variables/_layout.scss

//
// SASS-only variables
//


// Viewport breakpoints
$vp-large-min:      768px !default;
$vp-small-max:      $vp-large-min - 0.02 !default;


// Features support (you may disable any feature you don't need to decrease the size of the generated CSS)
$support-navbar-vertical:         true !default;
$support-navbar-inline:           true !default;
$support-navbar-sticky:           true !default;
$support-navbar-fixed:            true !default;
$support-navbar-offcanvas:        true !default;
$support-navbar-sidebar:          true !default;
$support-nav-left:                true !default;
$support-nav-center:              true !default;
$support-nav-right:               true !default;
$support-nav-fill:                true !default;
$support-nav-justify:             true !default;


// CSS variables prefix
$prefix:            sm !default;


// CSS variables scope (you could change this to :root if you like)
$var-scope:         '.sm-navbar' !default;


// RTL mode
$rtl:               false !default;


//
// SASS and CSS variables
//


// Components

// Navbar
$navbar-z-index:                        9999 !default;

// Sticky top navbar
$navbar-sticky-top-offset:              0 !default;

// Sticky bottom navbar
$navbar-sticky-bottom-offset:           0 !default;

// Sidebar navbar
$navbar-sidebar-width:                        300px !default;
$navbar-sidebar-centered-layout-max-width:    1200px !default;

// Container
$container-max-width:                   960px !default;

// Collapse
$collapse-max-height:                   calc(100vh - 70px) !default;
$collapse-show-animation:               sm-ani-collapse 0.25s ease-in !default;
$collapse-hide-animation:               sm-ani-collapse 0.25s ease-in reverse !default;

// Offcanvas
$offcanvas-width:                       300px !default;

// Offcanvas Overlay
$offcanvas-overlay-bg:                  rgba(0, 0, 0, 0.3) !default;

// Sub
$sub-min-width:                         12em !default;
$sub-collapsible-show-animation:        sm-ani-collapse 0.25s ease-in !default;
$sub-collapsible-hide-animation:        sm-ani-collapse 0.25s ease-in reverse !default;
$sub-dropdowns-show-animation:          none !default;
$sub-dropdowns-hide-animation:          sm-ani-fade 0.25s ease-in reverse !default;


#{$var-scope} {
  --#{$prefix}-navbar-z-index: #{$navbar-z-index};
  --#{$prefix}-navbar-sticky-top-offset: #{$navbar-sticky-top-offset};
  --#{$prefix}-navbar-sticky-bottom-offset: #{$navbar-sticky-bottom-offset};
  --#{$prefix}-navbar-sidebar-width: #{$navbar-sidebar-width};
  --#{$prefix}-navbar-sidebar-centered-layout-max-width: #{$navbar-sidebar-centered-layout-max-width};
  --#{$prefix}-container-max-width: #{$container-max-width};
  --#{$prefix}-collapse-max-height: #{$collapse-max-height};
  --#{$prefix}-collapse-show-animation: #{$collapse-show-animation};
  --#{$prefix}-collapse-hide-animation: #{$collapse-hide-animation};
  --#{$prefix}-offcanvas-width: #{$offcanvas-width};
  --#{$prefix}-offcanvas-overlay-bg: #{$offcanvas-overlay-bg};
  --#{$prefix}-sub-min-width: #{$sub-min-width};
  --#{$prefix}-sub-collapsible-show-animation: #{$sub-collapsible-show-animation};
  --#{$prefix}-sub-collapsible-hide-animation: #{$sub-collapsible-hide-animation};
  --#{$prefix}-sub-dropdowns-show-animation: #{$sub-dropdowns-show-animation};
  --#{$prefix}-sub-dropdowns-hide-animation: #{$sub-dropdowns-hide-animation};
}

Theme

Collapsible and dropdowns

The theme styles are separated into two mosly independent stylesheets - for the collapsible mode and for the dropdowns mode in which a navbar might be. Only the base theme variables are shared between both modes while all component related variables are available separately for each mode which allows customizing the collapsible and dropdowns themes almost completely independently of each other when this is needed.

Theme variables

All theme related variables have both a SASS and a respective CSS version. The CSS variables are scoped to .sm-navbar by default.

Base

These are shared between both collapsible and dropdowns modes.

// packages/smartmenus/src/css/variables/_theme-base.scss

//
// Theme - Base variables
//


// Colors
$light:                   #fff !default;
$dark:                    #262626 !default;

$brand:                   #1c72e3 !default;
$brand-contrast:          $light !default;

$accent:                  #74ecc8 !default;
$accent-contrast:         $dark !default;

// usually these should correspond to your main surface bg/text colors (e.g. whitish bg for a light theme and blackish bg for a dark theme)
$bg:                      $light !default;
$bg-soft:                 rgba(mix(black, $bg, 15%), 0.3) !default;
$text:                    $dark !default;
$text-disabled:           rgba($text, 0.38) !default;

// usually these should correspond to your alternative surface bg/text colors (e.g. grayish bg for neutral sidebars, teasers, buttons, etc.)
$bg-alt:                  mix(black, $bg, 3%) !default;
$bg-alt-soft:             rgba(mix(black, $bg-alt, 15%), 0.3) !default;
$text-alt:                $text !default;
$text-alt-disabled:       rgba($text-alt, 0.38) !default;

$separator:               rgba($text, 0.2) !default;
$border:                  rgba($text, 0.1) !default;
$text-shadow:             none !default;
$box-shadow:              rgba(0, 0, 0, 0.1) !default;

// Typography
$font-family:             inherit !default;
$font-size:               1rem !default;
$font-size-small:         0.875rem !default;
$line-height:             23px !default;

// Border radius
$border-radius:           8px !default;
$border-radius-large:     10px !default;
$border-radius-small:     6px !default;


#{$var-scope} {
  --#{$prefix}-light: #{$light};
  --#{$prefix}-dark: #{$dark};
  --#{$prefix}-brand: #{$brand};
  --#{$prefix}-brand-contrast: #{$brand-contrast};
  --#{$prefix}-accent: #{$accent};
  --#{$prefix}-accent-contrast: #{$accent-contrast};
  --#{$prefix}-bg: #{$bg};
  --#{$prefix}-bg-soft: #{$bg-soft};
  --#{$prefix}-text: #{$text};
  --#{$prefix}-text-disabled: #{$text-disabled};
  --#{$prefix}-bg-alt: #{$bg-alt};
  --#{$prefix}-bg-alt-soft: #{$bg-alt-soft};
  --#{$prefix}-text-alt: #{$text-alt};
  --#{$prefix}-text-alt-disabled: #{$text-alt-disabled};
  --#{$prefix}-separator: #{$separator};
  --#{$prefix}-border: #{$border};
  --#{$prefix}-text-shadow: #{$text-shadow};
  --#{$prefix}-box-shadow: #{$box-shadow};
  --#{$prefix}-font-family: #{$font-family};
  --#{$prefix}-font-size: #{$font-size};
  --#{$prefix}-font-size-small: #{$font-size-small};
  --#{$prefix}-line-height: #{$line-height};
  --#{$prefix}-border-radius: #{$border-radius};
  --#{$prefix}-border-radius-large: #{$border-radius-large};
  --#{$prefix}-border-radius-small: #{$border-radius-small};
}

Collapsible

// packages/smartmenus/src/css/variables/_theme-collapsible.scss

//
// Theme collapsible - Variables
//


// === Navbar variables ===

// Navbar
$collapsible-navbar-color:                        var(--#{$prefix}-text-alt) !default;
$collapsible-navbar-bg:                           var(--#{$prefix}-bg-alt) !default;
$collapsible-navbar-border-width:                 0px !default;
$collapsible-navbar-border-style:                 solid !default;
$collapsible-navbar-border-color:                 var(--#{$prefix}-border) !default;
$collapsible-navbar-padding-y:                    6px !default;
$collapsible-navbar-padding-x:                    6px !default;
$collapsible-navbar-text-shadow:                  0 1px 0 var(--#{$prefix}-text-shadow) !default;
$collapsible-navbar-box-shadow:                   0 0 0 var(--#{$prefix}-box-shadow) !default;

// Brand
$collapsible-brand-color:                         var(--#{$prefix}-collapsible-navbar-color) !default;
$collapsible-brand-font-size:                     calc(var(--#{$prefix}-font-size) * 1.25) !default;
$collapsible-brand-font-weight:                   normal !default;

// Nav Item
$collapsible-nav-item-spacing-y:                  2px !default;

// Nav Item Separator
$collapsible-nav-item-separator-border:           1px solid var(--#{$prefix}-separator) !default;
$collapsible-nav-item-separator-spacing:          6px !default;
$collapsible-nav-item-separator-fullsize-offset:  6px !default;

// Nav Link
$collapsible-nav-link-color:                      var(--#{$prefix}-collapsible-navbar-color) !default;
$collapsible-nav-link-bg:                         transparent !default;
$collapsible-nav-link-border-radius:              var(--#{$prefix}-border-radius) !default;
$collapsible-nav-link-first-border-radius:        var(--#{$prefix}-collapsible-nav-link-border-radius) !default;
$collapsible-nav-link-last-border-radius:         var(--#{$prefix}-collapsible-nav-link-border-radius) !default;
$collapsible-nav-link-font-weight:                normal !default;
$collapsible-nav-link-hover-color:                var(--#{$prefix}-text-alt) !default;
$collapsible-nav-link-hover-bg:                   var(--#{$prefix}-bg-alt-soft) !default;
$collapsible-nav-link-active-color:               var(--#{$prefix}-brand-contrast) !default;
$collapsible-nav-link-active-bg:                  var(--#{$prefix}-brand) !default;
$collapsible-nav-link-expanded-color:             var(--#{$prefix}-brand-contrast) !default; // highlighting a parent item when its sub is displayed
$collapsible-nav-link-expanded-bg:                var(--#{$prefix}-brand) !default;
$collapsible-nav-link-expanded-border-radius:             var(--#{$prefix}-border-radius) var(--#{$prefix}-border-radius) 0 0 !default;
$collapsible-nav-link-first-expanded-border-radius:       var(--#{$prefix}-collapsible-nav-link-expanded-border-radius) !default;
$collapsible-nav-link-last-expanded-border-radius:        var(--#{$prefix}-collapsible-nav-link-expanded-border-radius) !default;
$collapsible-nav-link-selected-color:             var(--#{$prefix}-accent-contrast) !default;
$collapsible-nav-link-selected-bg:                var(--#{$prefix}-accent) !default;
$collapsible-nav-link-selected-font-weight:       bold !default;
$collapsible-nav-link-disabled-color:             var(--#{$prefix}-text-alt-disabled) !default;
$collapsible-nav-link-padding-y:                  10px !default;
$collapsible-nav-link-padding-x:                  12px !default;
$collapsible-nav-link-split-separator-border:             1px solid currentcolor !default;
$collapsible-nav-link-split-separator-fullsize-offset:    8px !default;
$collapsible-nav-link-split-separator-opacity:            0.2 !default;
$collapsible-nav-link-split-toggler-border-radius:        var(--#{$prefix}-collapsible-nav-link-border-radius) !default;

// Sub Toggler
$collapsible-sub-toggler-color:               currentcolor !default;
$collapsible-sub-toggler-icon-size:           0.6rem !default;
$collapsible-sub-toggler-icon-spacing:        0.45rem !default;
$collapsible-sub-toggler-opacity:             0.7 !default;


// === Sub menus variables ===

// Sub
$collapsible-sub-bg:                          var(--#{$prefix}-bg-soft) !default; // darken the background of the 2+ level sub menus
$collapsible-sub-first-level-bg:              var(--#{$prefix}-bg) !default;
$collapsible-sub-border-radius:               var(--#{$prefix}-border-radius) !default;
$collapsible-sub-first-level-border-radius:   0 0 var(--#{$prefix}-border-radius) var(--#{$prefix}-border-radius) !default;
$collapsible-sub-padding-y:                   5px !default;
$collapsible-sub-padding-x:                   5px !default;
$collapsible-sub-text-shadow:                 0 1px 0 var(--#{$prefix}-text-shadow) !default;
$collapsible-sub-text-indent:                 0px !default; // text indentation for first level sub menus (always include units)
$collapsible-sub-sub-text-indent:             15px !default; // text indentation for second+ level sub menus (always include units)

// Sub Item
$collapsible-sub-item-spacing-y:              var(--#{$prefix}-collapsible-nav-item-spacing-y) !default;

// Sub Item Separator
$collapsible-sub-item-separator-border:               var(--#{$prefix}-collapsible-nav-item-separator-border) !default;
$collapsible-sub-item-separator-spacing:              var(--#{$prefix}-collapsible-nav-item-separator-spacing) !default;
$collapsible-sub-item-separator-fullsize-offset:      var(--#{$prefix}-collapsible-nav-item-separator-fullsize-offset) !default;

// Sub Link
$collapsible-sub-link-color:                  var(--#{$prefix}-text) !default;
$collapsible-sub-link-bg:                     transparent !default;
$collapsible-sub-link-border-radius:          var(--#{$prefix}-border-radius) !default;
$collapsible-sub-link-first-border-radius:    var(--#{$prefix}-collapsible-sub-link-border-radius) !default;
$collapsible-sub-link-last-border-radius:     var(--#{$prefix}-collapsible-sub-link-border-radius) !default;
$collapsible-sub-link-font-weight:            normal !default;
$collapsible-sub-link-hover-color:            var(--#{$prefix}-text) !default;
$collapsible-sub-link-hover-bg:               var(--#{$prefix}-bg-soft) !default;
$collapsible-sub-link-active-color:           var(--#{$prefix}-collapsible-nav-link-active-color) !default;
$collapsible-sub-link-active-bg:              var(--#{$prefix}-collapsible-nav-link-active-bg) !default;
$collapsible-sub-link-expanded-color:         var(--#{$prefix}-collapsible-sub-link-color) !default; // highlight a parent item when its sub is displayed
$collapsible-sub-link-expanded-bg:            var(--#{$prefix}-collapsible-sub-link-bg) !default;
$collapsible-sub-link-expanded-border-radius:         var(--#{$prefix}-border-radius) !default;
$collapsible-sub-link-first-expanded-border-radius:   var(--#{$prefix}-collapsible-sub-link-expanded-border-radius) !default;
$collapsible-sub-link-last-expanded-border-radius:    var(--#{$prefix}-collapsible-sub-link-expanded-border-radius) !default;
$collapsible-sub-link-selected-color:         var(--#{$prefix}-collapsible-nav-link-selected-color) !default;
$collapsible-sub-link-selected-bg:            var(--#{$prefix}-collapsible-nav-link-selected-bg) !default;
$collapsible-sub-link-selected-font-weight:   bold !default;
$collapsible-sub-link-disabled-color:         var(--#{$prefix}-text-disabled) !default;
$collapsible-sub-link-padding-y:              8px !default;
$collapsible-sub-link-padding-x:              12px !default;
$collapsible-sub-link-split-separator-border:           var(--#{$prefix}-collapsible-nav-link-split-separator-border) !default;
$collapsible-sub-link-split-separator-fullsize-offset:  var(--#{$prefix}-collapsible-nav-link-split-separator-fullsize-offset) !default;
$collapsible-sub-link-split-separator-opacity:          var(--#{$prefix}-collapsible-nav-link-split-separator-opacity) !default;
$collapsible-sub-link-split-toggler-border-radius:      var(--#{$prefix}-collapsible-sub-link-border-radius) !default;


#{$var-scope} {
  --#{$prefix}-collapsible-navbar-color: #{$collapsible-navbar-color};
  --#{$prefix}-collapsible-navbar-bg: #{$collapsible-navbar-bg};
  --#{$prefix}-collapsible-navbar-border-width: #{$collapsible-navbar-border-width};
  --#{$prefix}-collapsible-navbar-border-style: #{$collapsible-navbar-border-style};
  --#{$prefix}-collapsible-navbar-border-color: #{$collapsible-navbar-border-color};
  --#{$prefix}-collapsible-navbar-padding-y: #{$collapsible-navbar-padding-y};
  --#{$prefix}-collapsible-navbar-padding-x: #{$collapsible-navbar-padding-x};
  --#{$prefix}-collapsible-navbar-text-shadow: #{$collapsible-navbar-text-shadow};
  --#{$prefix}-collapsible-navbar-box-shadow: #{$collapsible-navbar-box-shadow};
  --#{$prefix}-collapsible-brand-color: #{$collapsible-brand-color};
  --#{$prefix}-collapsible-brand-font-size: #{$collapsible-brand-font-size};
  --#{$prefix}-collapsible-brand-font-weight: #{$collapsible-brand-font-weight};
  --#{$prefix}-collapsible-nav-item-spacing-y: #{$collapsible-nav-item-spacing-y};
  --#{$prefix}-collapsible-nav-item-separator-border: #{$collapsible-nav-item-separator-border};
  --#{$prefix}-collapsible-nav-item-separator-spacing: #{$collapsible-nav-item-separator-spacing};
  --#{$prefix}-collapsible-nav-item-separator-fullsize-offset: #{$collapsible-nav-item-separator-fullsize-offset};
  --#{$prefix}-collapsible-nav-link-color: #{$collapsible-nav-link-color};
  --#{$prefix}-collapsible-nav-link-bg: #{$collapsible-nav-link-bg};
  --#{$prefix}-collapsible-nav-link-border-radius: #{$collapsible-nav-link-border-radius};
  --#{$prefix}-collapsible-nav-link-first-border-radius: #{$collapsible-nav-link-first-border-radius};
  --#{$prefix}-collapsible-nav-link-last-border-radius: #{$collapsible-nav-link-last-border-radius};
  --#{$prefix}-collapsible-nav-link-font-weight: #{$collapsible-nav-link-font-weight};
  --#{$prefix}-collapsible-nav-link-hover-color: #{$collapsible-nav-link-hover-color};
  --#{$prefix}-collapsible-nav-link-hover-bg: #{$collapsible-nav-link-hover-bg};
  --#{$prefix}-collapsible-nav-link-active-color: #{$collapsible-nav-link-active-color};
  --#{$prefix}-collapsible-nav-link-active-bg: #{$collapsible-nav-link-active-bg};
  --#{$prefix}-collapsible-nav-link-expanded-color: #{$collapsible-nav-link-expanded-color};
  --#{$prefix}-collapsible-nav-link-expanded-bg: #{$collapsible-nav-link-expanded-bg};
  --#{$prefix}-collapsible-nav-link-expanded-border-radius: #{$collapsible-nav-link-expanded-border-radius};
  --#{$prefix}-collapsible-nav-link-first-expanded-border-radius: #{$collapsible-nav-link-first-expanded-border-radius};
  --#{$prefix}-collapsible-nav-link-last-expanded-border-radius: #{$collapsible-nav-link-last-expanded-border-radius};
  --#{$prefix}-collapsible-nav-link-selected-color: #{$collapsible-nav-link-selected-color};
  --#{$prefix}-collapsible-nav-link-selected-bg: #{$collapsible-nav-link-selected-bg};
  --#{$prefix}-collapsible-nav-link-selected-font-weight: #{$collapsible-nav-link-selected-font-weight};
  --#{$prefix}-collapsible-nav-link-disabled-color: #{$collapsible-nav-link-disabled-color};
  --#{$prefix}-collapsible-nav-link-padding-y: #{$collapsible-nav-link-padding-y};
  --#{$prefix}-collapsible-nav-link-padding-x: #{$collapsible-nav-link-padding-x};
  --#{$prefix}-collapsible-nav-link-split-separator-border: #{$collapsible-nav-link-split-separator-border};
  --#{$prefix}-collapsible-nav-link-split-separator-fullsize-offset: #{$collapsible-nav-link-split-separator-fullsize-offset};
  --#{$prefix}-collapsible-nav-link-split-separator-opacity: #{$collapsible-nav-link-split-separator-opacity};
  --#{$prefix}-collapsible-nav-link-split-toggler-border-radius: #{$collapsible-nav-link-split-toggler-border-radius};
  --#{$prefix}-collapsible-sub-toggler-color: #{$collapsible-sub-toggler-color};
  --#{$prefix}-collapsible-sub-toggler-icon-size: #{$collapsible-sub-toggler-icon-size};
  --#{$prefix}-collapsible-sub-toggler-icon-spacing: #{$collapsible-sub-toggler-icon-spacing};
  --#{$prefix}-collapsible-sub-toggler-opacity: #{$collapsible-sub-toggler-opacity};
  --#{$prefix}-collapsible-sub-bg: #{$collapsible-sub-bg};
  --#{$prefix}-collapsible-sub-first-level-bg: #{$collapsible-sub-first-level-bg};
  --#{$prefix}-collapsible-sub-border-radius: #{$collapsible-sub-border-radius};
  --#{$prefix}-collapsible-sub-first-level-border-radius: #{$collapsible-sub-first-level-border-radius};
  --#{$prefix}-collapsible-sub-padding-y: #{$collapsible-sub-padding-y};
  --#{$prefix}-collapsible-sub-padding-x: #{$collapsible-sub-padding-x};
  --#{$prefix}-collapsible-sub-text-shadow: #{$collapsible-sub-text-shadow};
  --#{$prefix}-collapsible-sub-text-indent: #{$collapsible-sub-text-indent};
  --#{$prefix}-collapsible-sub-sub-text-indent: #{$collapsible-sub-sub-text-indent};
  --#{$prefix}-collapsible-sub-item-spacing-y: #{$collapsible-sub-item-spacing-y};
  --#{$prefix}-collapsible-sub-item-separator-border: #{$collapsible-sub-item-separator-border};
  --#{$prefix}-collapsible-sub-item-separator-spacing: #{$collapsible-sub-item-separator-spacing};
  --#{$prefix}-collapsible-sub-item-separator-fullsize-offset: #{$collapsible-sub-item-separator-fullsize-offset};
  --#{$prefix}-collapsible-sub-link-color: #{$collapsible-sub-link-color};
  --#{$prefix}-collapsible-sub-link-bg: #{$collapsible-sub-link-bg};
  --#{$prefix}-collapsible-sub-link-border-radius: #{$collapsible-sub-link-border-radius};
  --#{$prefix}-collapsible-sub-link-first-border-radius: #{$collapsible-sub-link-first-border-radius};
  --#{$prefix}-collapsible-sub-link-last-border-radius: #{$collapsible-sub-link-last-border-radius};
  --#{$prefix}-collapsible-sub-link-font-weight: #{$collapsible-sub-link-font-weight};
  --#{$prefix}-collapsible-sub-link-hover-color: #{$collapsible-sub-link-hover-color};
  --#{$prefix}-collapsible-sub-link-hover-bg: #{$collapsible-sub-link-hover-bg};
  --#{$prefix}-collapsible-sub-link-active-color: #{$collapsible-sub-link-active-color};
  --#{$prefix}-collapsible-sub-link-active-bg: #{$collapsible-sub-link-active-bg};
  --#{$prefix}-collapsible-sub-link-expanded-color: #{$collapsible-sub-link-expanded-color};
  --#{$prefix}-collapsible-sub-link-expanded-bg: #{$collapsible-sub-link-expanded-bg};
  --#{$prefix}-collapsible-sub-link-expanded-border-radius: #{$collapsible-sub-link-expanded-border-radius};
  --#{$prefix}-collapsible-sub-link-first-expanded-border-radius: #{$collapsible-sub-link-first-expanded-border-radius};
  --#{$prefix}-collapsible-sub-link-last-expanded-border-radius: #{$collapsible-sub-link-last-expanded-border-radius};
  --#{$prefix}-collapsible-sub-link-selected-color: #{$collapsible-sub-link-selected-color};
  --#{$prefix}-collapsible-sub-link-selected-bg: #{$collapsible-sub-link-selected-bg};
  --#{$prefix}-collapsible-sub-link-selected-font-weight: #{$collapsible-sub-link-selected-font-weight};
  --#{$prefix}-collapsible-sub-link-disabled-color: #{$collapsible-sub-link-disabled-color};
  --#{$prefix}-collapsible-sub-link-padding-y: #{$collapsible-sub-link-padding-y};
  --#{$prefix}-collapsible-sub-link-padding-x: #{$collapsible-sub-link-padding-x};
  --#{$prefix}-collapsible-sub-link-split-separator-border: #{$collapsible-sub-link-split-separator-border};
  --#{$prefix}-collapsible-sub-link-split-separator-fullsize-offset: #{$collapsible-sub-link-split-separator-fullsize-offset};
  --#{$prefix}-collapsible-sub-link-split-separator-opacity: #{$collapsible-sub-link-split-separator-opacity};
  --#{$prefix}-collapsible-sub-link-split-toggler-border-radius: #{$collapsible-sub-link-split-toggler-border-radius};
}

Dropdowns

// packages/smartmenus/src/css/variables/_theme-dropdowns.scss

//
// Theme dropdowns - Variables
//


// === Navbar variables ===

// Navbar
$dropdowns-navbar-color:                          var(--#{$prefix}-text-alt) !default;
$dropdowns-navbar-bg:                             var(--#{$prefix}-bg-alt) !default;
$dropdowns-navbar-border-width:                   0px !default;
$dropdowns-navbar-border-style:                   solid !default;
$dropdowns-navbar-border-color:                   var(--#{$prefix}-border) !default;
$dropdowns-navbar-padding-y:                      6px !default;
$dropdowns-navbar-padding-x:                      6px !default;
$dropdowns-navbar-text-shadow:                    0 1px 0 var(--#{$prefix}-text-shadow) !default;
$dropdowns-navbar-box-shadow:                     0 0 0 var(--#{$prefix}-box-shadow) !default;

// Brand
$dropdowns-brand-color:                           var(--#{$prefix}-dropdowns-navbar-color) !default;
$dropdowns-brand-font-size:                       calc(var(--#{$prefix}-font-size) * 1.25) !default;
$dropdowns-brand-font-weight:                     normal !default;

// Nav Item Separator
$dropdowns-nav-item-separator-border:             1px solid var(--#{$prefix}-separator) !default;
$dropdowns-nav-item-separator-spacing:            6px !default;
$dropdowns-nav-item-separator-fullsize-offset:    6px !default;

// Nav Link
$dropdowns-nav-link-color:                        var(--#{$prefix}-dropdowns-navbar-color) !default;
$dropdowns-nav-link-bg:                           transparent !default;
$dropdowns-nav-link-border-radius:                var(--#{$prefix}-border-radius) !default;
$dropdowns-nav-link-first-border-radius:          var(--#{$prefix}-dropdowns-nav-link-border-radius) !default;
$dropdowns-nav-link-last-border-radius:           var(--#{$prefix}-dropdowns-nav-link-border-radius) !default;
$dropdowns-nav-link-font-weight:                  normal !default;
$dropdowns-nav-link-hover-color:                  var(--#{$prefix}-text-alt) !default;
$dropdowns-nav-link-hover-bg:                     var(--#{$prefix}-bg-alt-soft) !default;
$dropdowns-nav-link-active-color:                 var(--#{$prefix}-brand-contrast) !default;
$dropdowns-nav-link-active-bg:                    var(--#{$prefix}-brand) !default;
$dropdowns-nav-link-expanded-color:               var(--#{$prefix}-brand-contrast) !default; // highlighting a parent item when its sub is displayed
$dropdowns-nav-link-expanded-bg:                  var(--#{$prefix}-brand) !default;
$dropdowns-nav-link-expanded-border-radius:               var(--#{$prefix}-dropdowns-nav-link-border-radius) !default;
$dropdowns-nav-link-first-expanded-border-radius:         var(--#{$prefix}-dropdowns-nav-link-first-border-radius) !default;
$dropdowns-nav-link-last-expanded-border-radius:          var(--#{$prefix}-dropdowns-nav-link-last-border-radius) !default;
$dropdowns-nav-link-selected-color:               var(--#{$prefix}-accent-contrast) !default;
$dropdowns-nav-link-selected-bg:                  var(--#{$prefix}-accent) !default;
$dropdowns-nav-link-selected-font-weight:         bold !default;
$dropdowns-nav-link-disabled-color:               var(--#{$prefix}-text-alt-disabled) !default;
$dropdowns-nav-link-padding-y:                    11px !default;
$dropdowns-nav-link-padding-x:                    12px !default;
$dropdowns-nav-link-split-separator-border:               1px solid currentcolor !default;
$dropdowns-nav-link-split-separator-fullsize-offset:      8px !default;
$dropdowns-nav-link-split-separator-opacity:              0.2 !default;
$dropdowns-nav-link-split-toggler-border-radius:          var(--#{$prefix}-dropdowns-nav-link-border-radius) !default;
$dropdowns-nav-link-split-toggler-border-radius:          var(--#{$prefix}-dropdowns-nav-link-border-radius) !default;

// Sub Toggler
$dropdowns-sub-toggler-color:                 currentcolor !default;
$dropdowns-sub-toggler-icon-size:             0.45rem !default;
$dropdowns-sub-toggler-icon-spacing:          0.4rem !default;
$dropdowns-sub-toggler-split-icon-spacing:    0px !default;
$dropdowns-sub-toggler-opacity:               0.7 !default;


// === Dropdowns variables ===

// Sub
$dropdowns-sub-bg:                            var(--#{$prefix}-bg) !default;
$dropdowns-sub-border-width:                  1px !default;
$dropdowns-sub-border-style:                  solid !default;
$dropdowns-sub-border-color:                  var(--#{$prefix}-border) !default;
$dropdowns-sub-border-radius:                 var(--#{$prefix}-border-radius) !default;
$dropdowns-sub-first-level-border-radius:     var(--#{$prefix}-border-radius) !default;
$dropdowns-sub-padding-y:                     6px !default;
$dropdowns-sub-padding-x:                     6px !default;
$dropdowns-sub-text-shadow:                   0 1px 0 var(--#{$prefix}-text-shadow) !default;
$dropdowns-sub-box-shadow:                    0 3px 8px var(--#{$prefix}-box-shadow) !default;

// Sub Item Separator
$dropdowns-sub-item-separator-border:                 var(--#{$prefix}-dropdowns-nav-item-separator-border) !default;
$dropdowns-sub-item-separator-spacing:                var(--#{$prefix}-dropdowns-nav-item-separator-spacing) !default;
$dropdowns-sub-item-separator-fullsize-offset:        var(--#{$prefix}-dropdowns-nav-item-separator-fullsize-offset) !default;

// Sub Link
$dropdowns-sub-link-color:                    var(--#{$prefix}-text) !default;
$dropdowns-sub-link-bg:                       transparent !default;
$dropdowns-sub-link-border-radius:            var(--#{$prefix}-border-radius-small) !default;
$dropdowns-sub-link-first-border-radius:      var(--#{$prefix}-dropdowns-sub-link-border-radius) !default;
$dropdowns-sub-link-last-border-radius:       var(--#{$prefix}-dropdowns-sub-link-border-radius) !default;
$dropdowns-sub-link-font-weight:              normal !default;
$dropdowns-sub-link-hover-color:              var(--#{$prefix}-text) !default;
$dropdowns-sub-link-hover-bg:                 var(--#{$prefix}-bg-soft) !default;
$dropdowns-sub-link-active-color:             var(--#{$prefix}-dropdowns-nav-link-active-color) !default;
$dropdowns-sub-link-active-bg:                var(--#{$prefix}-dropdowns-nav-link-active-bg) !default;
$dropdowns-sub-link-expanded-color:           var(--#{$prefix}-dropdowns-nav-link-expanded-color) !default; // highlighting a parent item when its sub is displayed
$dropdowns-sub-link-expanded-bg:              var(--#{$prefix}-dropdowns-nav-link-expanded-bg) !default;
$dropdowns-sub-link-expanded-border-radius:           var(--#{$prefix}-dropdowns-sub-link-border-radius) !default;
$dropdowns-sub-link-first-expanded-border-radius:     var(--#{$prefix}-dropdowns-sub-link-first-border-radius) !default;
$dropdowns-sub-link-last-expanded-border-radius:      var(--#{$prefix}-dropdowns-sub-link-last-border-radius) !default;
$dropdowns-sub-link-selected-color:           var(--#{$prefix}-dropdowns-nav-link-selected-color) !default;
$dropdowns-sub-link-selected-bg:              var(--#{$prefix}-dropdowns-nav-link-selected-bg) !default;
$dropdowns-sub-link-selected-font-weight:     bold !default;
$dropdowns-sub-link-disabled-color:           var(--#{$prefix}-text-disabled) !default;
$dropdowns-sub-link-padding-y:                8px !default;
$dropdowns-sub-link-padding-x:                12px !default;
$dropdowns-sub-link-split-separator-border:           var(--#{$prefix}-dropdowns-nav-link-split-separator-border) !default;
$dropdowns-sub-link-split-separator-fullsize-offset:  var(--#{$prefix}-dropdowns-nav-link-split-separator-fullsize-offset) !default;
$dropdowns-sub-link-split-separator-opacity:          var(--#{$prefix}-dropdowns-nav-link-split-separator-opacity) !default;
$dropdowns-sub-link-split-toggler-border-radius:      var(--#{$prefix}-dropdowns-sub-link-border-radius) !default;


#{$var-scope} {
  --#{$prefix}-dropdowns-navbar-color: #{$dropdowns-navbar-color};
  --#{$prefix}-dropdowns-navbar-bg: #{$dropdowns-navbar-bg};
  --#{$prefix}-dropdowns-navbar-border-width: #{$dropdowns-navbar-border-width};
  --#{$prefix}-dropdowns-navbar-border-style: #{$dropdowns-navbar-border-style};
  --#{$prefix}-dropdowns-navbar-border-color: #{$dropdowns-navbar-border-color};
  --#{$prefix}-dropdowns-navbar-padding-y: #{$dropdowns-navbar-padding-y};
  --#{$prefix}-dropdowns-navbar-padding-x: #{$dropdowns-navbar-padding-x};
  --#{$prefix}-dropdowns-navbar-text-shadow: #{$dropdowns-navbar-text-shadow};
  --#{$prefix}-dropdowns-navbar-box-shadow: #{$dropdowns-navbar-box-shadow};
  --#{$prefix}-dropdowns-brand-color: #{$dropdowns-brand-color};
  --#{$prefix}-dropdowns-brand-font-size: #{$dropdowns-brand-font-size};
  --#{$prefix}-dropdowns-brand-font-weight: #{$dropdowns-brand-font-weight};
  --#{$prefix}-dropdowns-nav-item-separator-border: #{$dropdowns-nav-item-separator-border};
  --#{$prefix}-dropdowns-nav-item-separator-spacing: #{$dropdowns-nav-item-separator-spacing};
  --#{$prefix}-dropdowns-nav-item-separator-fullsize-offset: #{$dropdowns-nav-item-separator-fullsize-offset};
  --#{$prefix}-dropdowns-nav-link-color: #{$dropdowns-nav-link-color};
  --#{$prefix}-dropdowns-nav-link-bg: #{$dropdowns-nav-link-bg};
  --#{$prefix}-dropdowns-nav-link-border-radius: #{$dropdowns-nav-link-border-radius};
  --#{$prefix}-dropdowns-nav-link-first-border-radius: #{$dropdowns-nav-link-first-border-radius};
  --#{$prefix}-dropdowns-nav-link-last-border-radius: #{$dropdowns-nav-link-last-border-radius};
  --#{$prefix}-dropdowns-nav-link-font-weight: #{$dropdowns-nav-link-font-weight};
  --#{$prefix}-dropdowns-nav-link-hover-color: #{$dropdowns-nav-link-hover-color};
  --#{$prefix}-dropdowns-nav-link-hover-bg: #{$dropdowns-nav-link-hover-bg};
  --#{$prefix}-dropdowns-nav-link-active-color: #{$dropdowns-nav-link-active-color};
  --#{$prefix}-dropdowns-nav-link-active-bg: #{$dropdowns-nav-link-active-bg};
  --#{$prefix}-dropdowns-nav-link-expanded-color: #{$dropdowns-nav-link-expanded-color};
  --#{$prefix}-dropdowns-nav-link-expanded-bg: #{$dropdowns-nav-link-expanded-bg};
  --#{$prefix}-dropdowns-nav-link-expanded-border-radius: #{$dropdowns-nav-link-expanded-border-radius};
  --#{$prefix}-dropdowns-nav-link-first-expanded-border-radius: #{$dropdowns-nav-link-first-expanded-border-radius};
  --#{$prefix}-dropdowns-nav-link-last-expanded-border-radius: #{$dropdowns-nav-link-last-expanded-border-radius};
  --#{$prefix}-dropdowns-nav-link-selected-color: #{$dropdowns-nav-link-selected-color};
  --#{$prefix}-dropdowns-nav-link-selected-bg: #{$dropdowns-nav-link-selected-bg};
  --#{$prefix}-dropdowns-nav-link-selected-font-weight: #{$dropdowns-nav-link-selected-font-weight};
  --#{$prefix}-dropdowns-nav-link-disabled-color: #{$dropdowns-nav-link-disabled-color};
  --#{$prefix}-dropdowns-nav-link-padding-y: #{$dropdowns-nav-link-padding-y};
  --#{$prefix}-dropdowns-nav-link-padding-x: #{$dropdowns-nav-link-padding-x};
  --#{$prefix}-dropdowns-nav-link-split-separator-border: #{$dropdowns-nav-link-split-separator-border};
  --#{$prefix}-dropdowns-nav-link-split-separator-fullsize-offset: #{$dropdowns-nav-link-split-separator-fullsize-offset};
  --#{$prefix}-dropdowns-nav-link-split-separator-opacity: #{$dropdowns-nav-link-split-separator-opacity};
  --#{$prefix}-dropdowns-nav-link-split-toggler-border-radius: #{$dropdowns-nav-link-split-toggler-border-radius};
  --#{$prefix}-dropdowns-sub-toggler-color: #{$dropdowns-sub-toggler-color};
  --#{$prefix}-dropdowns-sub-toggler-icon-size: #{$dropdowns-sub-toggler-icon-size};
  --#{$prefix}-dropdowns-sub-toggler-icon-spacing: #{$dropdowns-sub-toggler-icon-spacing};
  --#{$prefix}-dropdowns-sub-toggler-split-icon-spacing: #{$dropdowns-sub-toggler-split-icon-spacing};
  --#{$prefix}-dropdowns-sub-toggler-opacity: #{$dropdowns-sub-toggler-opacity};
  --#{$prefix}-dropdowns-sub-bg: #{$dropdowns-sub-bg};
  --#{$prefix}-dropdowns-sub-border-width: #{$dropdowns-sub-border-width};
  --#{$prefix}-dropdowns-sub-border-style: #{$dropdowns-sub-border-style};
  --#{$prefix}-dropdowns-sub-border-color: #{$dropdowns-sub-border-color};
  --#{$prefix}-dropdowns-sub-border-radius: #{$dropdowns-sub-border-radius};
  --#{$prefix}-dropdowns-sub-first-level-border-radius: #{$dropdowns-sub-first-level-border-radius};
  --#{$prefix}-dropdowns-sub-padding-y: #{$dropdowns-sub-padding-y};
  --#{$prefix}-dropdowns-sub-padding-x: #{$dropdowns-sub-padding-x};
  --#{$prefix}-dropdowns-sub-text-shadow: #{$dropdowns-sub-text-shadow};
  --#{$prefix}-dropdowns-sub-box-shadow: #{$dropdowns-sub-box-shadow};
  --#{$prefix}-dropdowns-sub-item-separator-border: #{$dropdowns-sub-item-separator-border};
  --#{$prefix}-dropdowns-sub-item-separator-spacing: #{$dropdowns-sub-item-separator-spacing};
  --#{$prefix}-dropdowns-sub-item-separator-fullsize-offset: #{$dropdowns-sub-item-separator-fullsize-offset};
  --#{$prefix}-dropdowns-sub-link-color: #{$dropdowns-sub-link-color};
  --#{$prefix}-dropdowns-sub-link-bg: #{$dropdowns-sub-link-bg};
  --#{$prefix}-dropdowns-sub-link-border-radius: #{$dropdowns-sub-link-border-radius};
  --#{$prefix}-dropdowns-sub-link-first-border-radius: #{$dropdowns-sub-link-first-border-radius};
  --#{$prefix}-dropdowns-sub-link-last-border-radius: #{$dropdowns-sub-link-last-border-radius};
  --#{$prefix}-dropdowns-sub-link-font-weight: #{$dropdowns-sub-link-font-weight};
  --#{$prefix}-dropdowns-sub-link-hover-color: #{$dropdowns-sub-link-hover-color};
  --#{$prefix}-dropdowns-sub-link-hover-bg: #{$dropdowns-sub-link-hover-bg};
  --#{$prefix}-dropdowns-sub-link-active-color: #{$dropdowns-sub-link-active-color};
  --#{$prefix}-dropdowns-sub-link-active-bg: #{$dropdowns-sub-link-active-bg};
  --#{$prefix}-dropdowns-sub-link-expanded-color: #{$dropdowns-sub-link-expanded-color};
  --#{$prefix}-dropdowns-sub-link-expanded-bg: #{$dropdowns-sub-link-expanded-bg};
  --#{$prefix}-dropdowns-sub-link-expanded-border-radius: #{$dropdowns-sub-link-expanded-border-radius};
  --#{$prefix}-dropdowns-sub-link-first-expanded-border-radius: #{$dropdowns-sub-link-first-expanded-border-radius};
  --#{$prefix}-dropdowns-sub-link-last-expanded-border-radius: #{$dropdowns-sub-link-last-expanded-border-radius};
  --#{$prefix}-dropdowns-sub-link-selected-color: #{$dropdowns-sub-link-selected-color};
  --#{$prefix}-dropdowns-sub-link-selected-bg: #{$dropdowns-sub-link-selected-bg};
  --#{$prefix}-dropdowns-sub-link-selected-font-weight: #{$dropdowns-sub-link-selected-font-weight};
  --#{$prefix}-dropdowns-sub-link-disabled-color: #{$dropdowns-sub-link-disabled-color};
  --#{$prefix}-dropdowns-sub-link-padding-y: #{$dropdowns-sub-link-padding-y};
  --#{$prefix}-dropdowns-sub-link-padding-x: #{$dropdowns-sub-link-padding-x};
  --#{$prefix}-dropdowns-sub-link-split-separator-border: #{$dropdowns-sub-link-split-separator-border};
  --#{$prefix}-dropdowns-sub-link-split-separator-fullsize-offset: #{$dropdowns-sub-link-split-separator-fullsize-offset};
  --#{$prefix}-dropdowns-sub-link-split-separator-opacity: #{$dropdowns-sub-link-split-separator-opacity};
  --#{$prefix}-dropdowns-sub-link-split-toggler-border-radius: #{$dropdowns-sub-link-split-toggler-border-radius};
}

Which stylesheet to use?

The dist/css folder contains a number of pre-compiled stylesheets optimized for different scenarios. Ideally, you should use the one that is most suitable for your use-case to avoid serving your users unneeded code.

smartmenus(.rtl)(.min).css
Use if neither of your navbars is .sm-navbar--collapsible-only or .sm-navbar--dropdowns-only.

smartmenus-only-layout-and-theme-collapsible(.rtl)(.min).css
Use if all of your navbars are .sm-navbar--collapsible-only.

smartmenus-only-layout-and-theme-dropdowns(.rtl)(.min).css
Use if all of your navbars are .sm-navbar--dropdowns-only.

smartmenus-max(.rtl)(.min).css
Use if you have more than one navbar and some of them are .sm-navbar--collapsible-only or .sm-navbar--dropdowns-only while others do not have these classes set. This is the most complete stylesheet and covers all possible scenarios but it is also the largest in size.

smartmenus-only-layout(.rtl)(.min).css
Use if you only need the minimal required layout styles and do not want to use the theme styles (which include typography, colors, etc.). This is useful if you would like to style the navbar components on your own but still support all possible layout options.

On right-to-left pages (e.g. Hebrew, Arabic) just make sure you are using the *.rtl version of the stylesheet. The script will take care of everything automatically.

The SmartMenus Configurator will automatically suggest the most appropriate stylesheet to use based on the configured navbar(s).

Options

collapsibleActivateSelectedLinkOnInit
On init activate the link that has the classLinkSelected class (this will show the sub that contains it).
Default value: false : Boolean

collapsibleBehaviorAccordion
On sub expand reset any visible subs from deeper levels or other branches.
Default value: false : Boolean

collapsibleResetSubsOnClickOn
Reset the subs on click on…
Default value: 'toggler' : String
Possible values: 'none', 'toggler', 'page'

dropdownsShowTrigger
Dropdowns show trigger event.
Default value: 'click' : String
Possible values: 'click', 'mouseover', 'click-then-mouseover'

dropdownsShowTimeout
Timeout before showing the subs (matters only when dropdownsShowTrigger !== 'click').
Default value: 250 : Number

dropdownsHideTrigger
Dropdowns hide trigger event.
Default value: 'click' : String
Possible values: 'click', 'mouseout'

dropdownsHideTimeout
Timeout before hiding the subs (matters only when dropdownsHideTrigger === 'mouseout').
Default value: 500 : Number

dropdownsDropReverseX
Right to left display of the subs (and the opposite on right-to-left pages).
Default value: false : Boolean

dropdownsDropReverseY
Down to up display of the subs.
Default value: false : Boolean

dropdownsNavSubOffsetX
Pixels offset from default position.
Default value: 0 : Number

dropdownsNavSubOffsetY
Pixels offset from default position.
Default value: 0 : Number

dropdownsSubSubOffsetX
Pixels offset from default position.
Default value: 0 : Number

dropdownsSubSubOffsetY
Pixels offset from default position.
Default value: 0 : Number

dropdownsKeepInViewport
Reposition the subs if needed to make sure they always appear inside the viewport.
Default value: true : Boolean

markCurrentLinkAsSelectedOnInit
Automatically add the classLinkSelected class to the link element linking to the current URL.
Default value: false : Boolean

markCurrentLinkParentsAsSelected
Add the classLinkSelected class also to the link elements of all ancestor items of the current one.
Default value: false : Boolean

resetTogglerOnLinkSelect
Reset the toggler on link select which would hide the offcanvas/collapse.
Default value: false : Boolean

showSubOnSplitLinkSelect
Applies to split links only (that have both a link element and sub toggler element). Useful for single page applications (SPA) that use pushState/hash changes for navigation instead of full page reloads.
Default value: false : Boolean

classNavbarVertical
A class that signifies the navbar as vertical.
Default value: 'sm-navbar--vertical' : String

classNavbarDropReverseY
A class that signifies the subs as drop up instead of drop down from their parent link.
Default value: 'sm-navbar--drop-reverse-y' : String

classNavbarDropReverseX
A class that signifies the subs as drop left instead of drop right from their parent link (and the opposite on right-to-left pages).
Default value: 'sm-navbar--drop-reverse-x' : String

classSubMega
A class that signifies a sub as mega menu.
Default value: 'sm-sub--mega' : String

classLinkExpanded
A class that signifies a link as expanded. Set by the script when the sub of an item is expanded/shown. Applies to selectorLink elements.
Default value: 'sm-expanded' : String

classLinkSelected
A class that signifies a link as selected so it can be styled differently from the rest. It can be set either manually or the script can be configured to automatically set it to the link to the current loaded page URL via the selectCurrentLink: true option and also to the links of its ancestor items via the selectCurrentLinkAncestors: true option. Applies to selectorLink elements.
Default value: 'sm-selected' : String

classLinkDisabled
A class that signifies a link as disabled. Clicks on disabled links are neglected by the script. Applies to selectorLink elements.
Default value: 'sm-disabled' : String

classLinkHasSub
A class that signifies a link as one that has a sub. This class is set by the script on init to the links of all items that have a sub. Applies to selectorLink elements.
Default value: 'sm-has-sub' : String

classShow
A class that signifies an element is visible. Set by the script to elements that are made visible (e.g. could be a sub, an offcanvas, etc.).
Default value: 'sm-show' : String

classShowing
A class that signifies an element as being animated while showing (this class is set/unset by the script while any CSS animations are running when showing an element).
Default value: 'sm-showing' : String

classHiding
A class that signifies an element as being animated while hiding (this class is set/unset by the script while any CSS animations are running when hiding an element).
Default value: 'sm-hiding' : String

selectorTogglerState
CSS selector that matches the toggler state element.
Default value: '.sm-toggler-state' : String

selectorTogglerAnchorShow
CSS selector that matches the toggler anchor show element.
Default value: '.sm-toggler-anchor--show' : String

selectorTogglerAnchorHide
CSS selector that matches the toggler anchor hide element.
Default value: '.sm-toggler-anchor--hide' : String

selectorCollapse
CSS selector that matches the collapse element.
Default value: '.sm-collapse' : String

selectorOffcanvas
CSS selector that matches the offcanvas element.
Default value: '.sm-offcanvas' : String

selectorOffcanvasOverlay
CSS selector that matches the offcanvas overlay element.
Default value: '.sm-offcanvas-overlay' : String

selectorNav
CSS selector that matches the nav element.
Default value: '.sm-nav' : String

selectorSub
CSS selector that matches the sub elements.
Default value: '.sm-sub' : String

selectorItem
CSS selector that matches the item elements.
Default value: '.sm-nav-item, .sm-sub-item' : String

selectorLink
CSS selector that matches the link elements.
Default value: '.sm-nav-link, .sm-sub-link' : String

selectorLinkSplit
CSS selector that matches the link split elements.
Default value: '.sm-nav-link--split, .sm-sub-link--split' : String

Data attributes

data-sm-drop-reverse-x
Allows reversing the horizontal alignment of a specific sub.
Applies to: .sm-nav-item, .sm-sub-item

data-sm-drop-reverse-y
Allows reversing the vertical alignment of a specific sub.
Applies to: .sm-nav-item, .sm-sub-item

data-sm-[any-script-option]
Any of the script options can be set as a data attribute to the navbar element instead of being passed to the SmartMenus constructor in your JS code. These have highest priority and will extend and override any options passed to the SmartMenus constructor. Just make sure you are using kebab-case instead of camelCase.
Applies to: .sm-navbar
Script option:

const navbar1 = new SmartMenus(document.querySelector('#navbar1'), {
  dropdownsShowTrigger: 'mouseover'
})

Data attribute:

<nav id="navbar1" class="sm-navbar" data-sm-dropdowns-show-trigger="mouseover">

API

Events

activate
Fired when a link is activated, right before its sub is shown (if it has one). You can cancel the event by calling e.preventDefault() and the item’s sub will not be shown.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: Yes
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('activate-sm', (e) => {
  console.log(e.detail)

  // Cancel the event
  // e.preventDefault()
})

beforefirstshow
Fired only once right before the nav or a sub is shown for the first time. You could use it, for example, for some initialization tasks that need to be done just once. You can cancel the event by calling e.preventDefault() and the nav or sub will not be shown.
Applies to: .sm-nav, .sm-sub
Cancellable: Yes
e.detail: The nav or sub element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('beforefirstshow-sm', (e) => {
  console.log(e.detail)

  // Cancel the event
  // e.preventDefault()
})

beforehide
Fired before the nav or a sub is hidden. You can cancel the event by calling e.preventDefault() and the nav or sub will not be hidden.
Applies to: .sm-nav, .sm-sub
Cancellable: Yes
e.detail: The nav or sub element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('beforehide-sm', (e) => {
  console.log(e.detail)

  // Cancel the event
  // e.preventDefault()
})

beforeshow
Fired before the nav or a sub is shown. You can cancel the event by calling e.preventDefault() and the nav or sub will not be shown.
Applies to: .sm-nav, .sm-sub
Cancellable: Yes
e.detail: The nav or sub element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('beforeshow-sm', (e) => {
  console.log(e.detail)

  // Cancel the event
  // e.preventDefault()
})

blur
Fired when a link loses focus.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: No
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('blur-sm', (e) => {
  console.log(e.detail)
})

click
Fired when a link is clicked. You can cancel the event by calling e.preventDefault() and the link will not be selected and if there is a sub which should appear on click, it won’t be shown, too.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: Yes
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('click-sm', (e) => {
  console.log(e.detail)

  // Cancel the event
  // e.preventDefault()
})

focus
Fired when a link is focused.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: No
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('focus-sm', (e) => {
  console.log(e.detail)
})

hide
Fired right after the nav or a sub is hidden.
Applies to: .sm-nav, .sm-sub
Cancellable: No
e.detail: The nav or sub element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('hide-sm', (e) => {
  console.log(e.detail)
})

hideall
Fired when the whole nav tree is reset (e.g. on document click, onmouseout, etc. depending on what hide triggers are configured for the script).
Cancellable: No

document.querySelector('#navbar1').addEventListener('hideall-sm', (e) => {
  console.log(e.detail)
})

mouseenter
Fired when a link is hovered.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: No
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('mouseenter-sm', (e) => {
  console.log(e.detail)
})

mouseleave
Fired when a link is hovered out.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: No
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('mouseleave-sm', (e) => {
  console.log(e.detail)
})

select
Fired when a link is selected, right before the browser loads it. You can cancel the event by calling e.preventDefault() and the link will not be loaded by the browser.
Applies to: .sm-nav-link, .sm-sub-link
Cancellable: Yes
e.detail: The nav link or sub link element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('select-sm', (e) => {
  console.log(e.detail)

  // Cancel the event
  // e.preventDefault()
})

show
Fired right after the nav or a sub is shown.
Applies to: .sm-nav, .sm-sub
Cancellable: No
e.detail: The nav or sub element that the event has been triggered for

document.querySelector('#navbar1').addEventListener('show-sm', (e) => {
  console.log(e.detail)
})

Methods

Static methods

destroy
Destroys all navbar instances and cleans up.

SmartMenus.destroy()

subHideAll
Hides (resets) all subs of all navbar instances.

SmartMenus.subHideAll()

Instance methods

blur
Use the native JavaScript method for any .sm-nav-link or .sm-sub-link element if you need to. This will deactivate the item and hide any visible subs.

document.querySelector('#my-nav-link').blur()

destroy
Destroys the navbar instance and cleans up.

const navbar1 = new SmartMenus(document.querySelector('#navbar1'))

navbar1.destroy()

disable
Disables the script (all event handlers).

const navbar1 = new SmartMenus(document.querySelector('#navbar1'))

navbar1.disable()

enable
Enables the script (all event handlers) after it has been disabled.

const navbar1 = new SmartMenus(document.querySelector('#navbar1'))

navbar1.enable()

focus
Use the native JavaScript method for any .sm-nav-link or .sm-sub-link element if you need to. Note that you may need to call linkActivate first to make sure the sub containing the link is visible when you try to focus it.

document.querySelector('#my-nav-link').focus()

linkActivate
Activates any .sm-nav-link or .sm-sub-link element. This will show its sub (if it has a sub). If you would like to also send keyboard focus to the link, you can additionally call its native focus method.

const navbar1 = new SmartMenus(document.querySelector('#navbar1'))
const myNavLink = document.querySelector('#my-nav-link')

// Activate the link
navbar1.linkActivate(myNavLink)

// Focus the link
myNavLink.focus()

refresh
Refreshes (re-initializes) the navbar after any DOM operations might have affected it - e.g. adding/removing items and subs, etc.

const navbar1Elm = document.querySelector('#navbar1')
const navbar1 = new SmartMenus(navbar1Elm)

// Append a new nav item with a sub
navbar1Elm.querySelector('.sm-nav').insertAdjacentHTML('beforeend', `
<li class="sm-nav-item">
  <a class="sm-nav-link sm-sub-toggler" href="#">New item</a>
  <ul class="sm-sub">
    <li class="sm-sub-item"><a class="sm-sub-link" href="#">New item</a></li>
    <li class="sm-sub-item"><a class="sm-sub-link" href="#">New item</a></li>
    <li class="sm-sub-item"><a class="sm-sub-link" href="#">New item</a></li>
  </ul>
</li>`)

// Refresh the navbar after any DOM changes
navbar1.refresh()

subHideAll
Hides (resets) all subs.

const navbar1 = new SmartMenus(document.querySelector('#navbar1'))

navbar1.subHideAll()