How to use Menus and Navigation Components

How to use Menus and Navigation Components

Use menu and navigation components to organize links and help users move between screens, pages, or sections of an interface.

Before you start

  1. Make sure you have permission to edit the board and are in design editing mode.
  2. You can access menu components from the Smart Components section in the Wireframe Library.

Available menu components

Visily provides several menu components for different navigation layouts:
  1. Header Menu: Creates a horizontal navigation menu, typically placed at the top of a screen.
  2. Tab Bar Menu: Organizes navigation items into tabs that users can switch between.
  3. Sidebar Menu: Creates a vertical navigation menu for the side of a screen.
  4. Collapsed Sidebar Menu: Creates a compact sidebar that primarily uses icons and optional text.

Add a menu component

  1. Open the board where you want to add a menu.
  2. Open Wireframe Library.
  3. Select the menu you want to use from the Smart Components section.
  4. Click the canvas to add it.
  5. Move, resize, or customize the menu as needed.
Notes
Menu components help represent navigation in your design, but they do not automatically navigate between screens. Add interactions in Prototype mode to make them functional.

Manage a menu component

Select a menu component to open its toolbar. Depending on the selected element, you can:
  1. Style: Choose a preset style to quickly update the menu’s appearance.
  2. Size: Apply a preset size or manually adjust the menu dimensions, spacing between items, and padding.
  3. Color and opacity: Customize the menu color and layer opacity.
  4. Text style and alignment: Format the menu text and control how it is aligned within each item.
  5. Equalize menu item width: Make all items in a Header Menu the same width for a consistent layout.
  6. Add or remove text: Show or hide text labels in a Tab Bar Menu or Collapsed Sidebar Menu.
  7. Save as template: Save the menu and its settings as a reusable template.
  8. Export: Export the selected menu component to image/PDF or to Figma.
  9. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

Idea
If you want to edit or reuse each part of the smart components separately, select Break into basic elements.


Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to use Charts, Ratings, Avatars, and Other Components

      Use charts, ratings, avatars, and other components to display data, represent users, show feedback, and create more detailed interface designs. Before you start Make sure you have permission to edit the board and are in design editing mode. You can ...

    • How interaction triggers work

      Use interaction triggers to control how users start an action in your prototype, such as moving to another screen or opening an overlay. Before you start To add or edit triggers, switch your board to Prototype mode and select the screen or element ...

    • How to add elements to the canvas

      Add elements to the canvas to create and customize your designs. You can add basic elements from the bottom toolbar or choose ready-made elements from the Wireframe Library and Diagram Library. Before you start Make sure you have permission to edit ...

    • How to use Omni Search

      Use Omni Search in Visily to quickly find boards, folders, commands, features, and helpful resources from one search box. You can open Omni Search from both the workspace homepage and the board editor. What you can search With Omni Search, you can ...

    • How to use Text and Link elements

      Use Text and Link elements to add headings, descriptions, labels, and clickable text to your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Text element types Visily provides the following ...