Every menu has a layout. A top bar sits above the page, while a sidebar is docked to one side of it. Sidebars suit dashboards, member areas and documentation.
The layout is a setting of the menu, not a different kind of menu. You can build a menu as a top bar and switch it to a sidebar later, or the other way round.
Top bar: a bar across the top of the page. You choose how it behaves when visitors scroll with Menu Position.
Sidebar: a panel on the left or right of the page. It is always docked, so Menu Position does not apply.
Select Menu Template includes ready-made sidebar menus. Starting from one is often faster than converting a top bar.
1
Open the menu
Go to Pages and Menus, then Menus, and choose Edit content on the menu.
2
Open the settings
Click Menu configuration.
3
Change the layout
Under Layout, choose Sidebar.
4
Adjust it
Set the options below, then click Update Menu.
Side
Left or Right.
Width
How wide the sidebar is when expanded, from 180 to 480 pixels.
Collapsible
Lets visitors shrink the sidebar to a narrow icon rail.
Collapsed width
The width of that rail, from 56 to 120 pixels.
Start collapsed
Opens the sidebar as a rail until the visitor expands it.
Top bar
Adds a bar across the top of the page area, with its own elements.
When a collapsible sidebar is collapsed, its links show as icons, and links with nested links open their submenu in a flyout. Other elements hide until the sidebar expands again.
Give every top-level link an icon in its navigation. Without one, a link has nothing to show on the rail.
Each element has a Show when the sidebar is setting under Responsive & Visibility, with Always, Collapsed or hidden, and Expanded. Use it, for example, to show a small logo only while the sidebar is collapsed.
On phones and tablets the sidebar is hidden. Visitors get a bar with your logo and a hamburger that opens the menu instead.
If you turn on Top bar, it replaces that automatic bar on phones and tablets. In that case add a Logo and a Hamburger to your top bar yourself, and hide them on desktop.
For elements that should appear once the sidebar is gone, use Collapsed or hidden. On small screens the hidden sidebar counts as collapsed.
