Skip to content

ui: small visual adjustment for second nav and dropdown elements #5193

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
Simek merged 3 commits into from
Jul 28, 2026
+92 −60
Merged

ui: small visual adjustment for second nav and dropdown elements #5193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5eae80
ui: small visual adjustment for second nav and dropdown elements
Simek Jul 28, 2026
fc1bf7e
fix scroll regression, unify button height and dropdown placement
Simek Jul 28, 2026
3c87517
value tweak, lint fix
Simek Jul 28, 2026
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
6 changes: 2 additions & 4 deletions website/src/components/DocsSecondaryNav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,15 +243,13 @@ export default function DocsSecondaryNav({
<CopyPageButton
customStyles={{
container: {className: styles.copyPageContainer},
button: {
className: styles.copyPageButton,
style: {marginBottom: 0},
},
button: {className: styles.copyPageButton},
dropdown: {className: styles.copyPageDropdown},
}}
/>
)}
</div>
<div className={styles.secondaryNavDivider} />
</nav>
);
}
102 changes: 53 additions & 49 deletions website/src/components/DocsSecondaryNav/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
justify-content: space-between;
gap: 1rem;
height: var(--rn-subnav-height);
padding: 0 1.5rem;
padding: 0 var(--ifm-spacing-horizontal);

/* Pin directly below the main navbar so page content scrolls underneath. */
position: sticky;
Expand All @@ -36,8 +36,7 @@

/* Bottom keyline, inset from both edges so it comes in from the screen edges
without lining up with the inner elements' padding. */
.secondaryNav:after {
content: "";
.secondaryNavDivider {
position: absolute;
right: 0.75rem;
bottom: 0;
Expand All @@ -49,7 +48,7 @@
.start {
display: flex;
align-items: center;
gap: 1rem;
gap: 0.5rem;
min-width: 0;
}

Expand All @@ -71,6 +70,7 @@
font-size: 1.5rem;
font-weight: var(--ifm-heading-font-weight);
line-height: 1.2;
margin-right: 0.5rem;
}

/* Outlined controls: the section dropdown toggle and the back link share the
Expand All @@ -90,9 +90,12 @@
font-size: 0.9rem;
color: var(--ifm-font-color-base);
background: transparent;
border: 1px solid var(--ifm-color-emphasis-300);
border: 1px solid var(--ifm-color-emphasis-400);
border-radius: var(--ifm-global-radius);
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}

.dropdownToggle {
Expand Down Expand Up @@ -127,7 +130,7 @@
color: var(--ifm-font-color-base);
text-decoration: none;
background-color: var(--ifm-menu-color-background-hover);
border-color: var(--ifm-color-gray-400);
border-color: var(--ifm-color-gray-500);
}

/* Docs version dropdown wrapper. The dropdown reuses the theme navbar dropdown;
Expand All @@ -137,9 +140,6 @@
.versionDropdown {
display: flex;
align-items: center;

/* Sit closer to the section dropdown than the .start gap allows. */
margin-left: -0.5rem;
}

/* Copy page button — appearance shared with its former home in DocItem */
Expand All @@ -150,59 +150,63 @@

button.copyPageButton {
border-radius: var(--ifm-global-radius);
border-color: var(--ifm-color-gray-500);
}
border-color: var(--ifm-color-gray-400);
padding: 7px 12px;
margin-bottom: 0;

button.copyPageButton:hover {
background-color: var(--ifm-menu-color-background-hover) !important;
border-color: var(--ifm-color-gray-400) !important;
}
&:hover {
background-color: var(--ifm-menu-color-background-hover) !important;
border-color: var(--ifm-color-gray-500) !important;
}

button.copyPageButton svg {
opacity: 0.75;
svg {
opacity: 0.75;
}
}

.copyPageDropdown {
border-color: var(--ifm-table-border-color) !important;
}
margin-top: -3px;

.copyPageDropdown button[class^="dropdownItem"] {
border-bottom-color: var(--ifm-table-border-color) !important;
}

.copyPageDropdown button[class^="dropdownItem"]:hover {
background-color: var(--ifm-menu-color-background-hover);
}
button[class^="dropdownItem"] {
border-bottom-color: var(--ifm-table-border-color) !important;

.copyPageDropdown div[class^="itemDescription"] {
font-weight: 300;
font-size: 12px;
}
&:hover {
background-color: var(--ifm-menu-color-background-hover);
}
}

[data-theme="dark"] .dropdownToggle,
[data-theme="dark"] .backLink {
background-color: var(--light);
div[class^="itemDescription"] {
font-weight: 300;
font-size: 12px;
}
}

[data-theme="dark"] .dropdownToggle:hover,
[data-theme="dark"] .backLink:hover {
background-color: color-mix(in srgb, var(--light), white 10%);
border-color: var(--ifm-color-gray-800);
}
[data-theme="dark"] {
.dropdownToggle,
.backLink,
button.copyPageButton {
background-color: color-mix(in srgb, var(--light), black 25%) !important;
border-color: var(--ifm-hr-border-color) !important;
}

[data-theme="dark"] button.copyPageButton:hover {
background-color: var(--dark) !important;
border-color: var(--ifm-color-gray-800) !important;
}
.dropdownToggle:hover,
.backLink:hover,
button.copyPageButton:hover {
background-color: color-mix(in srgb, var(--light), black 10%) !important;
border-color: var(--ifm-color-gray-800) !important;
}

[data-theme="dark"] .copyPageDropdown {
background-color: var(--ifm-navbar-background-color);
}
.copyPageDropdown {
background-color: var(--ifm-navbar-background-color);
background-color: color-mix(in srgb, var(--light), black 40%) !important;

[data-theme="dark"] .copyPageDropdown button[class^="dropdownItem"]:hover {
background-color: var(--dark);
}
button[class^="dropdownItem"]:hover {
background-color: color-mix(in srgb, var(--light), black 20%);
}

[data-theme="dark"] .copyPageDropdown div[class^="itemDescription"] {
color: var(--ifm-color-gray-600) !important;
div[class^="itemDescription"] {
color: var(--ifm-color-gray-600) !important;
}
}
}
44 changes: 37 additions & 7 deletions website/src/css/docs-secondary-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,32 +79,62 @@ html.plugin-docs {
line-height: normal;
color: var(--ifm-font-color-base);
background: transparent;
border: 1px solid var(--ifm-color-emphasis-300);
border: 1px solid var(--ifm-color-emphasis-400);
border-radius: 999px;
transition:
background-color 0.2s ease,
border-color 0.2s ease;

// Match the section dropdown caret: nudged down and dimmed to grey.
&:after {
opacity: 0.6;
transform: translateY(-1px);
border-width: 0.3rem 0.3rem 0;
margin-left: 0.35rem;
}

&:hover {
color: var(--ifm-font-color-base);
background-color: var(--ifm-menu-color-background-hover);
border-color: var(--ifm-color-gray-400);
border-color: var(--ifm-color-gray-500);
}
}
}

[class*="dropdown"] {
.dropdown__menu {
border: 1px solid var(--ifm-table-border-color);
transform: translateY(4px);
overflow: visible;

// Make sure that menu does not close on hover, with dropdown portion detached via transform
&:before {
content: "";
position: absolute;
height: 5px;
top: -5px;
left: 0;
right: 0;
}
}
}

[data-theme="dark"] [class*="dropdown"] {
.dropdown__menu {
background-color: color-mix(in srgb, var(--light), black 40%);
}
}

// Placed before the `[data-version-next]` block so the brand-blue "Next" state
// still wins.
[data-theme="dark"] [class*="versionDropdown"] .navbar__link {
background-color: var(--light);
}
background-color: color-mix(in srgb, var(--light), black 25%);
border-color: var(--ifm-hr-border-color);

[data-theme="dark"] [class*="versionDropdown"] .navbar__link:hover {
background-color: color-mix(in srgb, var(--light), white 10%);
border-color: var(--ifm-color-gray-800);
&:hover {
background-color: color-mix(in srgb, var(--light), black 10%);
border-color: var(--ifm-color-gray-800);
}
}

[class*="versionDropdown"][data-version-next] .navbar__link {
Expand Down