Skip to content

Use token map for .navbar-nav CSS variables #42161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdo merged 1 commit into from
Mar 13, 2026
Merged

Use token map for .navbar-nav CSS variables #42161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ $nav-underline-tokens: defaults(
background: none;
border: var(--nav-link-border-width) solid transparent;
@include border-radius(var(--border-radius));
// @include font-size(var(--nav-link-font-size));
@include transition(var(--nav-link-transition));

&:hover,
Expand Down
43 changes: 26 additions & 17 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@

// mdo-do: fix nav-link-height and navbar-brand-height, which we previously calculated with font-size, line-height, and block padding

// stylelint-disable custom-property-no-missing-var-function
// scss-docs-start navbar-breakpoints
$navbar-breakpoints: $breakpoints !default;
// scss-docs-end navbar-breakpoints

$navbar-tokens: () !default;
$navbar-dark-tokens: () !default;
$navbar-nav-tokens: () !default;

// scss-docs-start navbar-tokens
// stylelint-disable-next-line scss/dollar-variable-default
Expand Down Expand Up @@ -43,8 +46,6 @@ $navbar-tokens: defaults(
);
// scss-docs-end navbar-tokens

$navbar-dark-tokens: () !default;

// scss-docs-start navbar-dark-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$navbar-dark-tokens: defaults(
Expand All @@ -61,6 +62,28 @@ $navbar-dark-tokens: defaults(
);
// scss-docs-end navbar-dark-tokens

// scss-docs-start navbar-nav-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$navbar-nav-tokens: defaults(
(
--nav-gap: .25rem,
--nav-link-gap: .5rem,
--nav-link-padding-x: .5rem,
--nav-link-padding-y: .375rem,
--nav-link-color: var(--navbar-color),
--nav-link-border-width: var(--border-width),
//--nav-link-border-color: var(--border-color),
--nav-link-hover-color: var(--navbar-hover-color),
--nav-link-hover-bg: transparent,
--nav-link-active-color: var(--navbar-active-color),
--nav-link-active-bg: transparent,
--nav-link-disabled-color: var(--navbar-disabled-color),
),
$navbar-nav-tokens
);
// scss-docs-end navbar-nav-tokens
// stylelint-enable custom-property-no-missing-var-function

@layer components {
// Base navbar
.navbar {
Expand Down Expand Up @@ -119,21 +142,7 @@ $navbar-dark-tokens: defaults(
//
// Relies on `.nav` base class.
.navbar-nav {
// scss-docs-start navbar-nav-css-vars
// Set all nav-link variables for self-contained styling
--nav-gap: .25rem;
--nav-link-gap: .5rem;
--nav-link-padding-x: .5rem;
--nav-link-padding-y: .375rem;
--nav-link-color: var(--navbar-color);
--nav-link-border-width: var(--border-width);
//--nav-link-border-color: var(--border-color);
--nav-link-hover-color: var(--navbar-hover-color);
--nav-link-hover-bg: transparent;
--nav-link-active-color: var(--navbar-active-color);
--nav-link-active-bg: transparent;
--nav-link-disabled-color: var(--navbar-disabled-color);
// scss-docs-end navbar-nav-css-vars
@include tokens($navbar-nav-tokens);

display: flex;
flex-direction: column;
Expand Down
2 changes: 2 additions & 0 deletions site/src/content/docs/components/navbar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,6 +713,8 @@ When you do this, we recommend including additional JavaScript to move the focus

<ScssDocs name="navbar-dark-tokens" file="scss/_navbar.scss" />

<ScssDocs name="navbar-nav-tokens" file="scss/_navbar.scss" />

### Sass map

We reassign the global `$breakpoints` map to `$navbar-breakpoints` in `scss/_navbar.scss` and use this for our loop to generate the responsive navbar expand/collapse classes. This allows you to customize the breakpoints for navbars independently of the global breakpoints.
Expand Down
Loading