SPFx-Projekte/CurrentNavigation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Update Current Navigation to version 1.1.0 with treeview support and improved accessibility

Browse Source
This commit is contained in:
Torsten Brendgen
2026-08-18 19:25:59 +02:00
parent 0a3219117a
commit 5725e1fe35
12 changed files with 372 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/extensions/currentNavigation/CurrentNavigation.module.scss
+76 -53
View File
@@ -1,12 +1,16 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
:global {
.current-navigation {
position: relative;
z-index: 299;
.current-navigation-managed > :not(#CurrentNavigationHost) {
display: none !important;
}
#CurrentNavigationHost {
width: 100%;
}
.current-navigation {
width: 100%;
border-bottom: 1px solid $ms-color-neutralLight;
background: $ms-color-white;
color: $ms-color-neutralPrimary;
font-family: $ms-font-family-fallbacks;
font-size: $ms-font-size-s;
@@ -18,74 +22,93 @@
list-style: none;
}
.current-navigation-root {
display: flex;
min-height: 40px;
padding: 0 16px !important;
.current-navigation-group {
padding-left: 20px !important;
}
.current-navigation li {
position: relative;
}
.current-navigation a,
.current-navigation span {
.current-navigation-row {
display: flex;
align-items: center;
min-height: 40px;
padding: 0 12px;
min-height: 36px;
}
.current-navigation-toggle,
.current-navigation-toggle-spacer {
flex: 0 0 32px;
width: 32px;
height: 36px;
}
.current-navigation-toggle {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: $ms-color-neutralSecondary;
cursor: pointer;
}
.current-navigation-toggle:hover {
background: $ms-color-neutralLighter;
color: $ms-color-neutralPrimary;
}
.current-navigation-chevron {
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(-45deg);
transition: transform 120ms ease;
}
.current-navigation-item[aria-expanded='true'] > .current-navigation-row .current-navigation-chevron {
transform: rotate(45deg);
}
.current-navigation-label {
display: flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
min-height: 36px;
padding: 0 12px 0 4px;
overflow: hidden;
color: inherit;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.current-navigation a:hover,
.current-navigation a:focus,
.current-navigation a.is-current {
color: $ms-color-themePrimary;
.current-navigation-label:hover,
.current-navigation-label:focus {
background: $ms-color-neutralLighter;
color: $ms-color-themePrimary;
}
.current-navigation a:focus {
.current-navigation-label:focus {
outline: 2px solid $ms-color-themePrimary;
outline-offset: -2px;
}
.current-navigation-children {
position: absolute;
top: 100%;
left: 0;
.current-navigation-label.is-current {
background: $ms-color-neutralLighter;
color: $ms-color-themePrimary;
font-weight: $ms-font-weight-semibold;
}
.current-navigation-group[hidden] {
display: none;
min-width: 220px;
border: 1px solid $ms-color-neutralLight;
background: $ms-color-white;
box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}
.current-navigation-children .current-navigation-children {
top: 0;
left: 100%;
@media (prefers-reduced-motion: reduce) {
.current-navigation-chevron { transition: none; }
}
.current-navigation li:hover > .current-navigation-children,
.current-navigation li:focus-within > .current-navigation-children {
display: block;
}
@media (max-width: 767px) {
.current-navigation-root {
flex-wrap: wrap;
padding: 0 8px !important;
}
.current-navigation-children,
.current-navigation-children .current-navigation-children {
position: static;
display: block;
min-width: 0;
border: 0;
box-shadow: none;
padding-left: 16px;
}
@media (forced-colors: active) {
.current-navigation-label:focus { outline: 2px solid CanvasText; }
}
}