Documentation

The icon nav layout focuses on a double topnavbar with a list of categories and submenu links, ideal for larger apps that have too much links to use the single topnav layout.

Layout features

  • Navigation:
  • Circular menu: When scrolling down, the circular menu is displayed at the bottom right of the screen. It can be used to display a set of quick actions.

First you need to enable the iconnav layout layer in the <app>/nuxt.config.ts file.

ts

Then you can configure the iconnav layout in the <app>/app.config.ts file.

ts

Default configuration

ts

You don't need to specify all the properties, only the ones you want to override.

Tools

To add tools to the toolbar or the circular menu, you have to create global components, and add them to the tools array.

ts

Navigation items

ts