Navigation
There are two navigations, a main one that is located in the header of the platform and a secondary navigation that is located on the left side like a sidebar.
This component allows the user to navigate within an application between its different pages and subsections.
Header
<code><nav id="header" class="pnavbar"> <ul id="nav" class="nav-links"> <li> <a href=""> <span>Label</span> </a> </li> <li> <a href=""> <span>Label</span> </a> </li> <li> <a href=""> <span>Label</span> </a> </li> <li> <a href=""> <span>Label</span> </a> </li> <li> <a href=""> <span>Label</span> </a> </li> <li> <a href=""> <span>Label</span> </a> </li> <li> <a href=""> <span>Label</span> </a> </li> </ul> <ul class="menu-right"> <li class="menuitem"> <button class="pbtn btn-primary" role="button">Label</button> </li> <li role="menuitem"> <button class="pbtn btn-secondary" role="button">Label</button> </li> <li role="menuitem"> <button class="btn btn-icon material-symbols-outlined" role="button">account_circle</button> </li> <li role="menuitem"> <button class="btn btn-icon material-symbols-outlined icon-logout" role="button">logout</button> </li> </ul> </nav>
content_copy
Sidebar
<div class="sidebar">
<div class="sidebar-wrapper">
<div class="sidebar-title">
<button class="slide-btn btn-icon material-symbols-outlined">chevron_left</button>
</div>
<div class="sidebar-content">
<div class="sidebar-section">
<a href="#" class="icon-link title active">
<i class="material-symbols-outlined">calendar_today</i>
<span class="section-title">Schedule</span>
</a>
</div>
<div class="sidebar-section">
<a href="#" class="icon-link title">
<i class="material-symbols-outlined">date_range</i>
<span class="section-title">Agenda</span>
</a>
</div>
<div class="sidebar-section">
<a href="#" class="icon-link title">
<i class="material-symbols-outlined">history</i>
<span class="section-title">History</span>
</a>
</div>
<div class="sidebar-section">
<a href="#" class="icon-link title">
<i class="material-symbols-outlined">favorite</i>
<span class="section-title">My doctors</span>
</a>
</div>
<div class="sidebar-section">
<a href="#" class="icon-link title">
<i class="material-symbols-outlined">assignment_turned_in</i>
<span class="section-title">Autorizations</span>
</a>
</div>
<div class="sidebar-section collapsible collapsed">
<div class="title icon-link">
<i class="material-symbols-outlined">person</i>
<span class="section-title">Profile</span>
</div>
<div class="section-links">
<div class="section-links-list">
<a href="#" class="sidebar-link">
<span>User information</span>
</a>
<a href="#" class="sidebar-link">
<span>Options</span>
</a>
</div>
</div>
</div>
<div class="sidebar-section">
<a href="#" class="icon-link title">
<i class="material-symbols-outlined">logout</i>
<span class="section-title">Exit</span>
</a>
</div>
</div>
</div>
</div>
content_copy
Header
A list of navigation links and buttons that users find in the header of every page.
Structure
1
Section: Show the different sections of the application.
2
Primary Button: Link to booking site.
3
Secondary Button: Indicates the headquarters/establishment that is being managed. Link to the venue selector.
4
Icon Buttons: Indicate different actions such as switching users, viewing the profile and exiting the application.
Sidebar
The sidebar component is used to display the secondary navigation in the side of the application's page. This one includes a list of links that users use to move between sections and subsections of the app.
General guidelines
Group navigation items into sections based on related categories.
- Use a title to clarify in which general section of the application the user is located.
- Use a section title to clarify the category of a section.
- Use a main icon for the actions of the elements.
- It can collapse. Only the icons of the main categories remain visible.
Structure
1
Title: Indicates the main section of the application.
2
Icon and Label: Indicates category.
3
Icon: Indicates that it can be deployed.
4