Navigation Bar#
The Navigation Bar is the main navigation element in Afina, containing a list of application sections and enabling quick navigation between them. It supports two display modes to adapt the interface to the workflow needs.
Location: access to the bar is available through the left side of the interface.
Available actions:
- view the list of main Afina sections
- navigate between sections with a single click
- change the bar display mode through the settings button
- choose between the “Expanded” mode and the “Expand on hover” mode
Navigation Bar Settings Button#
The Navigation Bar Settings Button is used to manage the display mode of the navigation bar. It is located at the top of the bar and opens the mode selection menu.
How to open the settings menu:
- Click the settings button at the top of the navigation bar.
- In the dropdown menu, choose the required display mode.
Navigation Bar Settings Menu#
The Navigation Bar Settings Menu contains two mutually exclusive display modes.
Mode “Expanded”:
The navigation bar is displayed in a constantly expanded state: section icons and names are visible at the same time.
Mode “Expand on hover”:
The navigation bar works in compact mode and displays only section icons. When hovering over it, the bar expands and shows section names.
The “Expand on hover” mode increases the useful workspace area because the bar takes up minimal space in its default state.
Workflow Scenario#
Step 1: Open Panel Settings
Click the settings button at the top of the navigation bar. A dropdown menu with two display modes will appear.
Step 2: Select a Mode
Click Expanded to make the panel always show icons and section names at the same time. Or click Expand on hover to keep the panel compact and expand it only when hovering over it.
Step 3: Check the Result
After selecting a mode, the navigation bar immediately changes its behavior. In the Expand on hover mode, hover over any section icon to see its name.