<nav class="navbar navbar-expand-md navbar-light bg-light right-bar">
<div class="navbar-wrapper" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto flex-column side_nav">
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle active" href="#">Page 1</a>
<button class="show-menu" id="Page 1_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Page 1_dropdown">
<div class="dropdown_category">
<ul class="category_items">
<li class="active-sublink">
<a href="#" class="active">Subpage 1</a>
<div class="dropdown-menu third-level" aria-labelledby="Page 1_dropdown">
<ul class="category_items">
<li class="active-sublink">
<a href="#" class="active">Sub Subpage 1</a>
</li>
<li>
<a href="#">Sub Subpage 2</a>
</li>
</ul>
</div><!-- end dropdown-menu -->
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
<li>
<a href="#">Subpage 4</a>
</li>
<li>
<a href="#">Subpage 5</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</nav>
{% for side_nav_item in side_nav_items %}
{% include "@navbar--sidebar" with side_nav_item %}
{% endfor %}
{
"sidebar": "yes",
"side_nav_items": {
"1": {
"breakpoint": "md",
"sideNav": true,
"nav_items": {
"1": {
"url": "#",
"link_text": "Page 1",
"active_item_sg": "yes",
"submenu_items": {
"1": {
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#",
"active_item_sg": "yes",
"sub_category_items": {
"1": {
"link_text": "Sub Subpage 1",
"url": "#",
"active_item_sg": "yes"
},
"2": {
"link_text": "Sub Subpage 2",
"url": "#"
}
}
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
},
"4": {
"link_text": "Subpage 4",
"url": "#"
},
"5": {
"link_text": "Subpage 5",
"url": "#"
}
}
}
}
},
"2": {
"url": "#",
"link_text": "Page 2"
},
"3": {
"url": "#",
"link_text": "Page 3"
},
"4": {
"url": "#",
"link_text": "Page 4"
},
"5": {
"url": "#",
"link_text": "Page 5"
}
}
}
}
}
.right-content {
.navbar {
display: block;
margin: 0 0 $space-two 0;
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
.navbar-nav {
&.side_nav {
align-items: flex-start;
width: 100%;
a {
font-size: .875rem;
}
.nav-item {
border-bottom: 2px solid $grey_light;
border-bottom: 2px solid var(--grey_light, $grey_light);
width: 100%;
padding: 0;
&:last-of-type {
border-bottom: 0;
}
.active {
font-weight: bold;
}
.button-wrapper {
display: block;
text-align: unset;
.dropdown-toggle,
.show-menu {
display: inline-block;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
.dropdown-toggle {
white-space: normal;
}
.dropdown-menu {
position: unset;
width: unset;
box-shadow: unset;
.color-scheme-dark & {
background-color: $background_darkmode;
background-color: var(--background_darkmode, $background_darkmode);
a {
color: $white;
color: var(--white, $white);
}
}
&.show {
display: block;
padding: $space-one-half;
background-color: $white;
background-color: var(--white, $white);
grid-template-columns: unset;
grid-gap: unset;
grid-template-rows: unset;
.color-scheme-dark & {
background-color: $background_darkmode;
background-color: var(--background_darkmode, $background_darkmode);
}
}
.category_items {
> li {
margin: 0 0 $spacer 0;
border-left: 2px solid $accent_color;
border-left: 2px solid var(--accent_color, $accent_color);
padding: 0 0 0 $space-one-half;
&:last-of-type {
margin: 0;
}
&.active-sublink {
border-left: 2px solid $lehigh_brown;
border-left: 2px solid var(--lehigh_brown, $lehigh_brown);
.color-scheme-dark & {
border-left: 2px solid $lehigh_brown_darkmode;
border-left: 2px solid var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
> a {
&.active {
font-weight: bold;
}
}
}
}
&.show {
.category_items {
.dropdown-menu {
display: block;
padding: 0;
margin: $space-one-half;
background-color: unset;
}
}
}
}
}
}
}
}
.navbar-collapse {
@include media-breakpoint-down(sm) {
margin: 0;
}
}
}
}
////////// for styleguide only
.right-bar {
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
.navbar-nav {
&.side_nav {
align-items: flex-start;
width: 100%;
a {
font-size: .875rem;
}
.nav-item {
border-bottom: 2px solid $grey_light;
border-bottom: 2px solid var(--grey_light, $grey_light);
width: 100%;
padding: 0;
&:last-of-type {
border-bottom: 0;
}
.active {
font-weight: bold;
}
.button-wrapper {
display: block;
text-align: unset;
.dropdown-toggle,
.show-menu {
display: inline-block;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
.dropdown-toggle {
white-space: normal;
}
.dropdown-menu {
position: unset;
width: unset;
box-shadow: unset;
.color-scheme-dark & {
background-color: $background_darkmode;
background-color: var(--background_darkmode, $background_darkmode);
a {
color: $white;
color: var(--white, $white);
}
}
&.show {
display: block;
padding: $space-one-half $space_three_quarter;
grid-template-columns: unset;
grid-gap: unset;
grid-template-rows: unset;
}
.category_items {
> li {
margin: 0 0 $spacer 0;
border-left: 2px solid $accent_color;
border-left: 2px solid var(--accent_color, $accent_color);
padding: 0 0 0 $space-one-half;
&:last-of-type {
margin: 0;
}
&.active-sublink {
border-left: 2px solid $lehigh_brown;
border-left: 2px solid var(--lehigh_brown, $lehigh_brown);
.color-scheme-dark & {
border-left: 2px solid $lehigh_brown_darkmode;
border-left: 2px solid var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
> a {
&.active {
font-weight: bold;
}
}
}
}
&.show {
.category_items {
.dropdown-menu {
display: block;
padding: 0;
margin: $space-one-half;
}
}
}
}
}
}
}
}
.navbar-collapse {
@include media-breakpoint-down(sm) {
margin: 0;
}
}
}
Disply navigation that is found in the right sidebar.