Navigation Layouts for Desktop and Mobile

The account menu can look like a classic sidebar, a row of tabs, a slim icon bar or an app-style floating dock, and you choose separately how it looks on phones. Pick the layout that suits your store and how many account pages you have.

Choose the menu layouts#

1. Go to WooCommerce > Account Portal > Appearance.
2. In section 5. Account menu, pick a layout under Computers and tablets: Sidebar, Top tabs, Icon rail or Floating dock.
3. Pick a layout under Phones: Menu button or Bottom tab bar.
4. Click Save Settings and check the portal on a computer and a phone.

“Phones” means screens 768px wide or narrower. Everything wider, including most tablets, uses the Computers and tablets layout. The layouts apply to signed-in customers; the login page has its own layouts.

Computers and tablets#

Layout	Setting value	Description in the plugin
Sidebar (default)	sidebar	The menu down the side with your logo, the mode switch and the customer at the bottom.
Top tabs	top	One bar across the top: logo, the pages as tabs, the customer and Sign out. More room for the page.
Icon rail	rail	A slim bar of icons down the side. The page name shows when the mouse is over an icon.
Floating dock	dock	The pages in a floating bar at the bottom, like an app. More opens the full menu.

Sidebar#

A 280px menu down the side: your logo at the top (sized with Logo max height), the account pages with their icons, and at the bottom the link back to your site, the Light / Dark / Auto switch, the customer’s name and Sign out. Best when you have many pages or want the familiar layout.

Top tabs#

A 64px bar across the top with the logo (40px tall), the pages as tabs, and icons for the link back to your site, the mode switch, the customer and Sign out. The page content is centred, up to 1200px wide.

• Below 1536px wide, the tabs show names only (no icons), so more pages fit.
• If the pages still do not fit, the tabs scroll sideways and the edge with more pages fades out.

Icon rail#

An 88px bar down the side with only the icons. Hovering or focusing an icon shows the page name in a tooltip. The logo is 44px tall, so a square logo or logo mark works best. Good when you want the most room for the content.

Floating dock#

The pages float in a rounded bar at the bottom of the screen, like an app dock. More, at the end of the dock, opens the full menu (the sidebar sliding in from the side) with Sign out, the mode switch and the link back to your site. A top bar shows your logo. If there are more pages than fit, the dock scrolls sideways.

Phones#

Layout	Setting value	Description in the plugin
Menu button (default)	drawer	A menu button in the top bar opens the menu from the side.
Bottom tab bar	tabbar	The first four pages in a bar at the bottom of the screen, like an app. More opens the rest of the menu.

With Bottom tab bar, the first four pages in your menu order are in the bar, and More opens the full menu. When the current page is not one of the first four, More is highlighted. The menu button in the top bar is hidden. Change which pages come first in WooCommerce > Account Portal > Menu Items.

Details#

• Colours: every menu layout uses the menu background variable --wap-menu-bg (falling back to the sidebar colour, --wap-surface), so the sidebar, top tabs, rail, phone top bar, tab bar and dock all match. The Brand theme with AI prompt tells the AI which layouts you use. The dock also has --wap-dock-radius (24px) and --wap-dock-shadow.
• RTL: in right-to-left languages the sidebar and rail sit on the right and the slide-out menu opens from the right.
• Reduced motion: the dock’s slide-in animation only plays when the visitor’s device allows motion.
• Body classes: the portal adds wap-navd-{layout} (computers) and wap-navm-{layout} (phones) to the <body>, for example wap-navd-top wap-navm-tabbar. Use them in Advanced CSS to style one layout.

Related#

• Adding Your Logo (Light and Dark Mode)
• Setting the Logo Max Height
• Light, Dark and Auto Mode
• Creating a Brand Theme with AI
• Adding Custom CSS