@datalayer/core/lib/components/subnav/SubNav.module.css

[](https://datalayer.io)

/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */

.SubNav__container {
  position: absolute;
  width: 100%;
  z-index: 2;
}

.SubNav__container--with-anchor-nav {
  display: unset;
  position: relative;
}

.SubNav {
  width: 100%;
  display: flex;
  padding: var(--base-size-16);
  z-index: 1;
}

[data-color-mode='dark'] .SubNav {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.SubNav__heading {
  font-weight: var(--base-text-weight-semibold);
  color: var(--brand-color-text-default);
  font-family: var(--brand-heading-fontFamily);
  text-decoration: none;
}

.SubNav__heading:hover {
  color: var(--brand-color-text-muted);
  text-decoration: none !important; /* dotcom override */
}

.SubNav--header-container-outer {
  width: 100%;
}

.SubNav__heading-container {
  position: relative;
  z-index: 9998;
  display: inline-block;
  margin-inline-end: var(--base-size-16);
}

.SubNav--has-shadow {
  box-shadow: var(--brand-SubNav-shadow);
  background-color: var(--brand-color-canvas-default);
}

.SubNav--full-width {
  padding-inline: 0;
}

.SubNav__action-container {
  margin-left: auto;
}

.SubNav__sub-menu-icon {
  display: none !important;
}

.SubNav__sub-menu-children {
  display: contents;
}

.SubNav__links-overlay {
  list-style: none;
  margin: 0;
  padding: 0;
}

.SubNav__links-overlay > span {
  display: none;
}

.SubNav__sub-menu-toggle {
  display: none;
}

.SubNav__heading-separator {
  position: relative;
  top: var(--base-size-2);
  color: var(--brand-color-text-muted);
}

/*
   * Anchor Nav Submenu
   */

.SubNav__anchor-menu-outer-container {
  position: sticky;
  top: -1px;
  z-index: 91; /* must be higher than subdomain nav bar */
}

.SubNav__anchor-menu-container {
  opacity: 0;
  background-color: transparent;
  transform: translateY(var(--brand-animation-variant-slideInDown-distance));
  transition:
    opacity var(--brand-animation-duration-default)
      var(--brand-animation-easing-default),
    background-color var(--brand-animation-duration-default)
      var(--brand-animation-easing-default);
}

.SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {
  transform: translateY(0);
  opacity: 1;
  background-color: var(--brand-color-canvas-default);
}

.SubNav__anchor-menu-outer-container {
  height: 0;
  transition: height var(--brand-animation-duration-default)
    var(--brand-animation-easing-default);
}

.SubNav__anchor-menu-outer-container--stuck {
  height: auto;
}

.SubNav__sub-menu--anchor {
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--brand-animation-variant-slideInDown-distance));
  transition:
    opacity var(--brand-animation-duration-default)
      var(--brand-animation-easing-default),
    height var(--brand-animation-duration-default)
      var(--brand-animation-easing-default),
    transform var(--brand-animation-duration-default)
      var(--brand-animation-easing-default);
}

.SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.SubNav__sub-menu--anchor {
  display: flex;
  padding-block-start: var(--base-size-12);
  padding-block-end: var(--base-size-20);
}

.SubNav__sub-menu--anchor .SubNav__sub-menu-list {
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: var(--base-size-20);
}

.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {
  color: var(--brand-color-text-default);
}

.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
.SubNav__link:hover .SubNav__link-label::after,
.SubNav__link:focus-visible .SubNav__link-label::after,
.SubNav__link[aria-current]:not([aria-current='false'])
  .SubNav__link-label::after {
  opacity: 1;
  transform: scale(0.8, 1);
}

.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
.SubNav__link:active .SubNav__link-label::after {
  border-color: var(--brand-color-text-default);
  transform: scale(0.9, 1);
}

.SubNav__link[data-active='true'] .SubNav__link-label::after,
.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after {
  border-color: var(--brand-color-text-default);
  opacity: 1;
}

.SubNav__link:focus-visible .SubNav__link-label::after,
.SubNav__sub-menu--anchor
  .SubNav__link--is-in-view:focus-visible
  .SubNav__link-label::after {
  opacity: 0;
}

.SubNav__link:hover .SubNav__link-label::after,
.SubNav__link[aria-current]:not([aria-current='false']) * {
  color: var(--brand-SubNav-color-link-active);
  text-decoration: none !important; /* dotcom override */
}

.SubNav__link-label::after {
  content: '';
  position: absolute;
  bottom: calc(var(--base-size-2) * -1);
  left: 0;
  width: 100%;
  height: 2px;
  border-width: 2px;
  border-bottom: var(--base-size-2) solid var(--brand-color-text-muted);
  transition:
    opacity var(--brand-animation-duration-fast),
    transform var(--brand-animation-duration-fast),
    border-color var(--brand-animation-duration-fast);
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}

.SubNav__link[aria-current]:not([aria-current='false'])
  .SubNav__link-label::after {
  border-color: var(--brand-color-text-default);
}

.SubNav__link:hover .SubNav__link-label {
  transition: color var(--brand-animation-duration-fast)
    var(--brand-animation-easing-default);
  color: var(--brand-SubNav-color-link-active);
}

.SubNav__link:hover .SubNav__link-label::after {
  border-color: var(--brand-color-text-default);
}

/*
 * Narrow breakpoint
 */

@media screen and (max-width: 63.24rem) {
  .SubNav {
    position: relative;
  }

  .SubNav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 9997;
  }

  .SubNav::after {
    content: '';
    z-index: -1;
    position: fixed;
    background-color: var(--base-color-scale-black-0);
    opacity: 0;
    visibility: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .SubNav--open::after {
    opacity: 0.3;
    visibility: visible;
    transition:
      visibility var(--brand-animation-duration-default)
        var(--brand-animation-easing-default),
      opacity var(--brand-animation-duration-default)
        var(--brand-animation-easing-default);
  }

  .SubNav__heading {
    font-size: var(--base-size-16);
    line-height: var(--base-size-24);
  }

  .SubNav--open {
    display: block;
  }

  .SubNav--open + .SubNav__anchor-menu-outer-container {
    z-index: -1;
  }

  .SubNav--open::before {
    background-color: var(--brand-color-canvas-default);
    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;
  }

  .SubNav__header-container {
    display: flex;
    width: 100%;
    white-space: pre;
  }

  .SubNav__heading-separator {
    margin-inline-end: var(--base-size-16);
    z-index: 9998;
  }

  .SubNav__heading-separator:not(
    .SubNav__heading-separator--has-adjacent-label
  ) {
    display: none;
  }

  .SubNav__links-overlay {
    position: relative;
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: center;
    z-index: 9998;
    display: none;
  }

  .SubNav__links-overlay--open {
    display: flex;
    flex-direction: column;
    gap: var(--base-size-8);
    padding-block-start: var(--base-size-16);
    padding-block-end: var(--base-size-16);
  }

  .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {
    color: var(--brand-color-text-default);
  }

  .SubNav__links-overlay--open
    .SubNav__link--has-sub-menu:hover
    .SubNav__link-label {
    color: var(--brand-color-text-muted);
  }

  .SubNav__overlay-toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    position: relative;
    width: 100%;
    display: flex;
    order: 1;
    z-index: 9999;
    padding-inline: 0;
    justify-content: end;
  }

  .SubNav__overlay-toggle-content {
    justify-content: space-between;
    width: 100%;
  }

  .SubNav--full-width .SubNav__overlay-toggle {
    right: 0;
  }

  .SubNav__link,
  .SubNav__action-container {
    display: none;
    text-decoration: none;
  }

  .SubNav__links-overlay--open .SubNav__link-label {
    position: relative;
  }

  .SubNav__links-overlay--open
    .SubNav__link[aria-current]:not([aria-current='false'])
    * {
    color: var(--brand-SubNav-color-link-active);
  }

  .SubNav__links-overlay--open .SubNav__link,
  .SubNav__links-overlay--open .SubNav__action-container {
    display: block;
    padding: var(--base-size-8) 0;
    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;
  }

  .SubNav__links-overlay--open .SubNav__link--has-sub-menu {
    padding-block: 0;
  }

  .SubNav__links-overlay--open .SubNav__action-container {
    width: 100%;
  }

  .SubNav__links-overlay--open .SubNav__action {
    width: 100%;
  }

  .SubNav__sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-inline-start: var(--base-size-16);
  }

  .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {
    color: var(--brand-color-text-default) !important;
  }

  .SubNav__anchor-menu-container {
    z-index: 99;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
  }

  .SubNav__anchor-menu-outer-container {
    position: sticky;
    top: -1px;
  }

  .SubNav__anchor-menu-outer-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--base-size-32);
    background: linear-gradient(
      to left,
      var(--brand-color-canvas-default),
      transparent
    );
    pointer-events: none;
    z-index: 100;
  }

  .SubNav__link-label {
    font-size: var(--brand-text-size-200);
    font-weight: var(--base-text-weight-semibold);
    padding-block-end: var(--base-size-6);
  }

  .SubNav__sub-menu--anchor {
    padding-inline: var(--base-size-16);
    padding-block-end: var(--base-size-16);
    padding-block-start: var(--base-size-16);
  }

  .SubNav__sub-menu--anchor .SubNav__link-label {
    font-size: var(--brand-text-size-100);
    line-height: var(--brand-text-lineHeight-100);
    letter-spacing: var(--brand-text-letterSpacing-100);
  }

  .SubNav__sub-menu--anchor .SubNav__sub-menu-list {
    padding-inline-end: var(--base-size-32);
  }

  .SubNav__sub-menu--anchor .SubNav__link {
    display: block;
    white-space: pre;
    position: relative;
  }

  .SubNav .SubNav__link-label::after {
    opacity: 0;
    transform: scale(0);
    bottom: 0;
  }

  .SubNav__link:hover .SubNav__link-label::after,
  .SubNav__link:focus-visible .SubNav__link-label::after,
  .SubNav__link[aria-current]:not([aria-current='false'])
    .SubNav__link-label::after {
    opacity: 1;
    transform: scale(1);
  }
}

.SubNav__overlay-toggle-icon {
  fill: var(--brand-color-text-default);
}

.SubNav__overlay-toggle-content {
  display: flex;
  align-items: center;
  gap: var(--base-size-8);

  /* optical alignment */
  position: relative;
  top: calc(var(--base-size-4) / 4 * -1);
}

.SubNav__overlay-toggle-content--end {
  justify-content: flex-end;
}

@media screen and (min-width: 48rem) {
  .SubNav {
    padding: var(--base-size-16) var(--base-size-24);
  }

  .SubNav--full-width {
    padding-inline: 0;
  }

  .SubNav__sub-menu--anchor {
    padding-inline: var(--base-size-24);
  }
}

.SubNav__heading-label {
  white-space: pre;
}

/*
 * Wide breakpoint
 */

@media screen and (min-width: 63.25rem) {
  .SubNav {
    padding: var(--base-size-16) var(--base-size-32);
    align-items: center;
    display: flex;
    z-index: 92;
  }

  .SubNav:has(+ .SubNav__anchor-menu-container) {
    padding-block-end: 0;
  }

  .SubNav--full-width {
    padding-inline: 0;
  }

  .SubNav__overlay-toggle {
    display: none;
  }

  .SubNav__heading {
    font-size: calc(var(--base-size-20) - 2px);
    line-height: var(--base-size-24);
  }

  .SubNav__heading-separator {
    margin-inline-end: var(--base-size-20);
  }

  .SubNav--header-container-outer {
    display: flex;
    align-items: center;
  }

  .SubNav__heading-container {
    margin-inline-end: var(--base-size-20);
  }

  .SubNav__links-overlay {
    align-items: center;
    display: flex;
    gap: var(--base-size-20);
    z-index: 92;
    flex-grow: 1;
  }

  .SubNav__link {
    text-decoration: none !important; /* dotcom override */
    transition: color 0.2s var(--brand-animation-easing-glide);
    position: relative;
    padding: var(--base-size-4) 0;
  }

  .SubNav__link-label {
    font-size: var(--brand-text-size-100);
    line-height: var(--brand-text-lineHeight-100);
  }

  .SubNav__link--has-sub-menu {
    padding: var(--base-size-4) 0;
  }

  /* To fix hover distance between link and dropdown */
  .SubNav__link--has-sub-menu::after {
    content: '';
    position: absolute;
    bottom: calc(var(--base-size-12) * -1);
    left: 0;
    width: 100%;
    height: var(--base-size-12);
    background: transparent;
  }

  .SubNav__sub-menu.SubNav__sub-menu--dropdown {
    background-clip: padding-box;
    background-color: var(--brand-SubNav-color-subMenu-bgColor);
    border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid
      var(--borderColor-default, var(--color-border-default));
    border-radius: var(--brand-borderRadius-xlarge, 0.375rem);
    box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));
    left: 0;
    list-style: none;
    margin-block-start: var(--base-size-8);
    padding: var(--base-size-24);
    padding-inline-end: var(--base-size-24);
    position: absolute;
    top: 100%;
    z-index: 9998;
    transition-timing-function: var(--brand-animation-easing-glide);
    transition-duration: var(--brand-animation-duration-fast);
    transition-property: opacity, transform;
    left: calc(var(--base-size-4) / 4 * -16);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.99) translateY(-0.7em) translateX(-8px);
    transform-origin: top;
    display: flex;
    flex-direction: column;
    gap: var(--base-size-8);
    width: var(--brand-SubNav-width-subMenu);
  }

  .SubNav__link--expanded .SubNav__sub-menu.SubNav__sub-menu--dropdown {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0) translateX(-8px);
    box-shadow: var(--brand-SubNav-shadow);
  }

  .SubNav__sub-menu-toggle {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .SubNav__sub-menu .SubNav__link {
    display: block;
  }

  .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {
    color: var(--brand-color-text-default) !important;
  }

  .SubNav__sub-menu--dropdown .SubNav__link-label::after {
    opacity: 1;
    transform: scale(0);
  }

  .SubNav__link--has-sub-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--base-size-4);
    cursor: pointer;
  }

  .SubNav__sub-menu--dropdown .SubNav__link-label {
    position: relative;
    padding: var(--base-size-4) 0;
  }

  /* Show underline on submenu parent when child has aria-current */
  .SubNav__link--has-sub-menu:has(
      .SubNav__link[aria-current]:not([aria-current='false'])
    )
    > .SubNav__link
    .SubNav__link-label::after {
    opacity: 1;
    transform: scale(0.8, 1);
  }

  .SubNav__link--has-sub-menu
    .SubNav__link[aria-current]:not([aria-current='false'])
    .SubNav__link-label::after,
  .SubNav__link--has-sub-menu .SubNav__link:hover .SubNav__link-label::after {
    opacity: 1;
    transform: scale(1);
  }

  .SubNav__sub-menu-icon {
    display: inline-block !important;
    fill: var(--brand-color-text-muted);
    transition: transform var(--brand-animation-duration-fast);
  }

  .SubNav__link--has-sub-menu:hover .SubNav__sub-menu-icon {
    transform: translateY(2px);
  }

  .SubNav__sub-menu--anchor {
    padding-inline: var(--base-size-32);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}