P
CUI v1.20.1177
- • Color Palette
- • Icon
- • Media Query
- • Spacing
- • String Validation
- • Tooltip
- • Truncate
- • Typography
- • Badge
- • Buttons
- • Change Tracker
- • Checkboxes
- • Flat Text Buttons
- • Header Branded Panel
- • Loading bars
- • Overlay Container Sliding
- • Language Switcher
- • Pie Chart
- • Progress
- • Radio Sliders
- • Relative Date
- • Rich Text Field
- • Text Fields
- • Complex Table
- • DatePicker
- • DatePickerV2
- • Dismissible Alert
- • Floating Panel
- • Headers - Sections
- • Leaflet
- • List Groups
- • List Group Accordion
- • Menu
- • Reusable Modal
- • Save Changes Modal
- • Simple Table
- • Standard View
- • Stepper
- • Tabs
- • Timeline
- • Upload
- • View Toggle Container
P
C
U
I
F
R
A
M
E
W
O
R
K
M
E
N
U
Side Navigation
Documentation and examples in using Side Navigation with PCUI
Note: Side Navigation Template uses media queries (layout changes based on viewport width) and NOT element queries (layout changes based on container width)
Include in your HTML
Copied successfully!
<link href="~/PCUIAssets/PCUI/Elements/HeaderBrandedPanel/css/HeaderBrandedPanel.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/Badge/css/Badge.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/SideNavigation/css/SideNavigation.min.css" rel="stylesheet" />
Copied successfully!
<div class="sidenav-main-container">
<div class="header-branded-panel-main-container">
<div class="sub-container-image">
<img src="~/PCUIAssets/PCUI/Elements/HeaderBrandedPanel/images/header-branded-panel.png" />
</div>
<div class="sub-container-info">
<label class="main-text">Jacinta BurnsdottirDieWalküreDesNibelungen</label>
<label class="sub-text">PelicanCorp</label>
</div>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-user"></i>
<label>Your jobs</label>
<div class="badge badge-default">1</div>
</a>
<div class="list-group-container">
<a class="list-sub-item-container">
<label>Subsection</label>
<div class="badge badge-default">1</div>
</a>
<a class="list-sub-item-container active">
<label>Subsection:Active</label>
<div class="badge badge-default">1</div>
</a>
<a class="list-sub-item-container">
<label>Subsection</label>
<div class="badge badge-default">1</div>
</a>
<a class="list-sub-item-container">
<label>Subsection</label>
<div class="badge badge-default">1</div>
</a>
</div>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-users"></i>
<label>All jobs</label>
<div class="badge badge-default">1</div>
</a>
<div class="list-group-container">
<a class="list-sub-item-container">
<label>Subsection</label>
<div class="badge badge-default">1</div>
</a>
<a class="list-sub-item-container active">
<label>Subsection:Active</label>
<div class="badge badge-default">1</div>
</a>
<a class="list-sub-item-container">
<label>Subsection</label>
<div class="badge badge-default">1</div>
</a>
<a class="list-sub-item-container">
<label>Subsection</label>
<div class="badge badge-default">1</div>
</a>
</div>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-user-circle"></i>
<label>Your profile</label>
<div class="badge badge-default">1</div>
</a>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-cog"></i>
<label>Settings</label>
<div class="badge badge-default">1</div>
</a>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-info-circle"></i>
<label>About PlanAccess</label>
<div class="badge badge-default">1</div>
</a>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-shield-alt"></i>
<label>Privacy</label>
<div class="badge badge-default">1</div>
</a>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-question-circle"></i>
<label>Help</label>
<div class="badge badge-default">1</div>
</a>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-comment-dots"></i>
<label>Send feedback</label>
<div class="badge badge-default">1</div>
</a>
</div>
<div class="sidenav-sub-container">
<a class="list-item-container">
<i class="fas fa-sign-out-alt"></i>
<label>Log out</label>
<div class="badge badge-default">1</div>
</a>
</div>
</div>