@hummingbirdui/hummingbird/src/components/navbar.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility navbar {
  @layer base {
    --navbar-padding-x: --spacing(3);
    --navbar-padding-y: --spacing(2);
    --navbar-color: var(--text-color-muted);
    --navbar-hover-color: var(--text-color-default);
    --navbar-disabled-color: var(--color-disabled-color);
    --navbar-active-color: var(--text-color-default);
    --navbar-brand-padding-y: --spacing(1.25);
    --navbar-brand-margin-end: --spacing(4);
    --navbar-brand-font-size: var(--text-lg);
    --navbar-brand-color: var(--text-color-default);
    --navbar-brand-hover-color: var(--text-color-default);
    --navbar-nav-link-padding-x: --spacing(2);

    @apply relative
    flex flex-wrap items-center justify-between
    px-[var(--navbar-padding-x)]
    py-[var(--navbar-padding-y)];

    > .container,
    > .sm\:container,
    > .md\:container,
    > .lg\:container,
    > .xl\:container,
    > .\32xl\:container {
      @apply flex flex-wrap items-center justify-between;
    }
  }
}

@utility navbar-brand {
  @layer base {
    @apply py-[var(--navbar-brand-padding-y)]
    mr-[var(--navbar-brand-margin-end)]
    text-[length:var(--navbar-brand-font-size)]
    text-[var(--navbar-brand-color)]
    no-underline
    whitespace-nowrap leading-[1.5];

    &:hover,
    &:focus {
      @apply text-[var(--navbar-brand-hover-color)]
      no-underline;
    }
  }
}

@utility navbar-nav {
  @layer base {
    --nav-link-padding-x: 0;
    --nav-link-padding-y: --spacing(2);
    --nav-link-font-weight: var(--font-weight-medium);
    --nav-link-color: var(--text-color-muted);
    --nav-link-font-size: var(--text-base);
    --nav-link-line-height: 1.5;
    --nav-link-disabled-color: var(--color-disabled-color);
    --nav-link-active-color: unset;

    @apply flex flex-col
    pl-0 mb-0
    list-none;

    .nav-link {
      &.active,
      &.show {
        @apply text-[var(--navbar-active-color)];
      }
    }

    .dropdown-menu {
      @apply static;
    }
  }
}

@utility navbar-text {
  @layer base {
    @apply py-[var(--navbar-padding-y)]
    text-[var(--navbar-color)];

    a,
    a:hover,
    a:focus {
      @apply text-[var(--navbar-active-color)];
    }
  }
}

@utility navbar-collapse {
  @layer base {
    @apply grow basis-full items-center;
  }
}

@utility navbar-nav-scroll {
  @layer base {
    @apply max-h-[var(--scroll-height,_75vh)] overflow-y-auto;
  }
}

@utility navbar-expand {
  @layer base {
    @apply flex-nowrap justify-start;

    .navbar-nav {
      @apply flex-row;

      .dropdown-menu {
        @apply absolute;
      }

      .nav-link {
        @apply px-[var(--navbar-nav-link-padding-x)];
      }
    }

    .navbar-nav-scroll {
      @apply overflow-visible;
    }

    .navbar-collapse {
      @apply flex! basis-auto;
    }

    .navbar-toggler {
      @apply hidden;
    }
  }

  .offcanvas {
    @apply offcanvas-static transition-none!;
  }
}

@utility navbar-expand-sm {
  @variant sm {
    @apply navbar-expand;
  }
}
@utility navbar-expand-md {
  @variant md {
    @apply navbar-expand;
  }
}
@utility navbar-expand-lg {
  @variant lg {
    @apply navbar-expand;
  }
}
@utility navbar-expand-xl {
  @variant xl {
    @apply navbar-expand;
  }
}
@utility navbar-expand-2xl {
  @variant 2xl {
    @apply navbar-expand;
  }
}