Source: dist/css/virtual_boot.css, line 6547
7.1 Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]" aria-expanded="true">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 12176
7.1 Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]" aria-expanded="true">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 6583
7.1.1 Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 12212
7.1.1 Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 6604
7.1.2 Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]">
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 12233
7.1.2 Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]">
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 6565
7.1.3 Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]" aria-expanded="true">
<i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 12194
7.1.3 Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier]" aria-controls="[modifier]" aria-expanded="true">
<i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 6512
7.1.4 Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a + icon that twists to an x when the elements doesn't have collapsed or show as a class. to reduce confusion the class has a set rotation and speed attached to it. a:rotation is applied to the tow specific icons fa-times and fa-chevron-up only.
These classes are effected by the parent having
collapsed state.Example s
expanded
when the associated content is expanded the toggle will look like this
collapsed
when the associated content is collapsed the class is added to the toggle and it will look like this.
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x c_black"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 12141
7.1.4 Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a + icon that twists to an x when the elements doesn't have collapsed or show as a class. to reduce confusion the class has a set rotation and speed attached to it. a:rotation is applied to the tow specific icons fa-times and fa-chevron-up only.
These classes are effected by the parent having
collapsed state.Example s
expanded
when the associated content is expanded the toggle will look like this
collapsed
when the associated content is collapsed the class is added to the toggle and it will look like this.
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
<div class="flex_none p_2 [modifier]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x c_black"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 7413
7.2 Header Nav
The header nav for the website.
Navigation.HeaderNav.MobileButton - Primary
Navigation.HeaderNav.Active - Primary: Active
Navigation.HeaderNav.Disabled - Primary: Disabled
Navigation.HeaderNav.MobileToggle - Mobile Menu Toggle
Navigation.HeaderNav.MobileHidden - Secondary
Navigation.HeaderNav.MobileHiddenDisabled - Secondary: Disabled
Navigation.HeaderNav.ExpandMobileLinks - Mobile Menu Link
Navigation.HeaderNav.ExpandMobileLinksDisabled - Mobile Menu Link: Disabled
Sub Components in Design:
Example
Default styling
<div class="sticky t_0 flex l_0 r_0 relative:md z_4 bg_acc justify_center">
<nav class="flex_auto max-w_90 font_n1 font_1:md font_2:lg font_display font_medium m-l_0 navbar navbar-dark navbar-expand-lg p_0 text_center:lg text_left">
<!-- Primary Nav that expands on mobile and reveals extra nav items when on desktop. -->
<ul class="navbar-nav flex flex_row w_100">
<!-- When Nav is Active add the [ active ] classes to all locations to the basic design -->
<li class="nav-item flex_auto [ active ]">
<a class="[ active ][ text-shadow_black-1 ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/" target="_self">
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-home-heart display_none:lg"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">Primary: Active</span>
</a>
</li> <!-- All areas that have `[ ]` in the design are areas where classes might be added or removed. -->
<li class="nav-item flex_auto [~]">
<a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/program" target="_self">
<!-- icon is needed for the Primary Button Nav -->
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-calendar-alt display_none:lg"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- [] -->
Primary
</span>
</a>
</li> <li class="nav-item flex_auto ">
<!-- If Button Disabled add the classes in the bracket to the Base Design and remove [ text-shadow_black-1 ] -->
<a class="[ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/faculty" target="_blank">
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-users display_none:lg"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- If Button Disabled Add This Icon --><i class="fas fa-lock p-r_3"></i>
Primary: Disabled
</span>
</a>
</li> <!-- MENU toggle for mobile is a unique pattern -->
<li class="nav-item flex_auto block display_none:lg">
<a class="bg_secondary h:bg_secondary-n2 flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 font_medium h:c_white text-shadow_black-1 h:c_white justify_center nav-link text_center p-y_3:md" aria-expanded="false" aria-label="Toggle Extra Nav" data-bs-toggle="collapse" data-bs-target="#ExpandingMobileMenu" aria-controls="ExpandingMobileMenu"
>
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-ellipsis-h-alt"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">More</span>
</a>
</li>
<!-- MENU toggle for mobile is a unique pattern --> <!-- menu items that hide when in mobile under the expanded area -->
<!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
<a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
<!-- [~] -->
<span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
</a>
</li> <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
<a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- If Button Disabled Add This Icon -->
<i class="fas fa-lock p-r_3"></i>
Secondary: Disabled
</span>
</a>
</li> <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
<a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
<!-- [~] -->
<span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
</a>
</li> </ul>
<!-- Expanding Mobile Menu -->
<div class="collapse navbar-collapse" id="ExpandingMobileMenu">
<ul class="navbar-nav flex shadow_emboss-light flex_column w_100 font_1 bg_black-2 display_none:lg" >
<li class="nav-item flex_auto br-b_1 br_solid br_black-2">
<a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
<!-- [~] -->
Mobile Menu Link
</a>
</li> <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
<!-- if disabled add these classes to the a tag -->
<a class=" [ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg" href="/convocation" target="_self">
<!-- If Button Disabled Add This Icon -->
<i class="fas fa-lock p-l_3"></i>
Mobile Menu Link: Disablled
</a>
</li> <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
<a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
<!-- [~] -->
Mobile Menu Link
</a>
</li> </ul>
</div>
</nav>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 7586
7.2.1 Nav Active
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Example
Default styling
<!-- When Nav is Active add the [ active ] classes to all locations to the basic design -->
<li class="nav-item flex_auto [ active ]">
<a class="[ active ][ text-shadow_black-1 ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/" target="_self">
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-home-heart display_none:lg"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">Primary: Active</span>
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 7546
7.2.2 Mobile Menu Link
Header Nav in mobile view has an expanded more list that hides the secondary nav items.
Example
Default styling
<li class="nav-item flex_auto br-b_1 br_solid br_black-2">
<a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
<!-- [~] -->
Mobile Menu Link
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 7565
7.2.3 Mobile Menu Link Disabled
Header Nav in mobile view has an expanded more list that hides the secondary nav items.
Example
Default styling
<li class="nav-item flex_auto br-b_1 br_solid br_black-2">
<!-- if disabled add these classes to the a tag -->
<a class=" [ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg" href="/convocation" target="_self">
<!-- If Button Disabled Add This Icon -->
<i class="fas fa-lock p-l_3"></i>
Mobile Menu Link: Disablled
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 7457
7.2.4 Base Header Nav (Primary)
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Example
Default styling
<!-- All areas that have `[ ]` in the design are areas where classes might be added or removed. -->
<li class="nav-item flex_auto [~]">
<a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/program" target="_self">
<!-- icon is needed for the Primary Button Nav -->
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-calendar-alt display_none:lg"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- [] -->
Primary
</span>
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 7503
7.2.5 Base Header Nav (Secondary)
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Example
Default styling
<!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
<a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
<!-- [~] -->
<span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 7523
7.2.6 Mobile Hidden Header Nav Disabled
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Example
Default styling
<!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
<a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- If Button Disabled Add This Icon -->
<i class="fas fa-lock p-r_3"></i>
Secondary: Disabled
</span>
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 7481
7.2.7 Mobile Toggle
Toggle button for the expanding mobile menu.
Example
Default styling
<!-- MENU toggle for mobile is a unique pattern -->
<li class="nav-item flex_auto block display_none:lg">
<a class="bg_secondary h:bg_secondary-n2 flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 font_medium h:c_white text-shadow_black-1 h:c_white justify_center nav-link text_center p-y_3:md" aria-expanded="false" aria-label="Toggle Extra Nav" data-bs-toggle="collapse" data-bs-target="#ExpandingMobileMenu" aria-controls="ExpandingMobileMenu"
>
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-ellipsis-h-alt"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">More</span>
</a>
</li>
<!-- MENU toggle for mobile is a unique pattern -->Code Sample
Source: dist/css/virtual_boot.css, line 7606
7.2.8 Nav Disabled
Disabled Header Nav is used when the conference site is open but all pages should be accessible. This is limited to the early stages of the conference before the site is fully open.
Example
Default styling
<li class="nav-item flex_auto ">
<!-- If Button Disabled add the classes in the bracket to the Base Design and remove [ text-shadow_black-1 ] -->
<a class="[ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/faculty" target="_blank">
<i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-users display_none:lg"></i>
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- If Button Disabled Add This Icon --><i class="fas fa-lock p-r_3"></i>
Primary: Disabled
</span>
</a>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 6312
7.3 Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="nav-sub bg_primary c_white font_2 font_ui ">
<ul class="ul_none flex_column flex">
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li> </ul>
</nav>Code Sample
Source: dist/css/virtual_boot.css, line 12255
7.3 Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="nav-sub bg_primary c_white font_2 font_ui ">
<ul class="ul_none flex_column flex">
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li> </ul>
</nav>Code Sample
Source: dist/css/virtual_boot.css, line 6339
7.3.1 Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Example
Default styling
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 12282
7.3.1 Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Example
Default styling
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 6387
7.3.2 Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
Example s
default
the toggle when it doesn't have an active class still shades on hover
active
shade the toggle
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<div class="[modifier] br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div>Code Sample
Source: dist/css/virtual_boot.css, line 12330
7.3.2 Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
Example s
default
the toggle when it doesn't have an active class still shades on hover
active
shade the toggle
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<div class="[modifier] br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div>Code Sample
Source: dist/css/virtual_boot.css, line 6357
7.3.3 Child NavItem
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier]" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 [modifier] c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 12300
7.3.3 Child NavItem
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier]" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 [modifier] c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 6409
7.3.4 Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 12352
7.3.4 Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 6442
7.3.5 Child NavItem With Grand Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 12385
7.3.5 Child NavItem With Grand Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 6489
7.3.6 Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier] " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" [modifier] text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 12432
7.3.6 Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier] " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" [modifier] text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li>