This type of navigation is a perfect fit for web applications consisting of more
than seven or eight pages. A sidebar will clearly outline the structure of your web
application. Even if you are planning to extend your web app in future, you won't have
to go through a navigation revamp. Besides, a sidebar can include links to application
settings and a user profile and display a notification counter. You can combine a sidebar
with a toolbar at the top of the screen.
A toolbar suits small web applications comprising not more than seven or eight pages.
It takes up minimum space on the screen and looks concise. A toolbar enables users to
access any part of your web app in one click. If you would like to display links to the
pages of your web application in a toolbar, make sure that the toolbar looks consistent on
all pages. It is good practice to place links to settings, notifications, messages, and
a user profile in a separate block inside the toolbar.
We recommend implementing a double sidebar navigation with the help of DHTMLX Sidebar
and List widgets. If one of the sidebar items consists of many similar subitems,
you can present these subitems using the List widget. This type of navigation is
appropriate for enumerating people, objects, or subjects. The detailed information
on the element chosen from the List widget is shown to the right of the sidebar. You
can also combine a double sidebar with a toolbar at the top of the screen to display
settings, notifications, messages, and a user profile.
This type matches small web applications with up to seven or eight pages. It allows
visually separating the navigation of your web app. A toolbar can contain links to
settings, notifications, messages, and a user profile. You can also include buttons
for performing different actions on a page there. Meanwhile links to the pages of
your web app can be displayed in a tab bar. This type of navigation is clear and simple.
However, if you are going to extend your web app, you’d better opt for a sidebar navigation.