Static Views
      Back to home
      1. Knowledge Base
      2. Views
      3. Static Views

      About Menu Views

      In this article, you will find detailed information regarding Knack's Menu views.

      A Menu serves the purpose of showcasing links to additional pages within your application or external websites.

      How Menus Work

      Menus contain clickable links that allow users to navigate to different pages within the application or even to external websites.

      Menus are a handy tool for organizing multiple pages and views. For instance, if a page becomes too cluttered with a grid listing numerous records and a form to add a new record, you can simplify navigation for users by linking to the Form view from a Menu view.

      This makes it effortless for users to find what they need.

       

      What Do Menus Look Like in a Live App?

      This Menu is positioned below a Details view and provides the functionality to open modal popups for users to conveniently edit or add records.

      menus1

      Managing Menus

      To learn how to add, edit, and delete views from your app, see our About Views article.

       

      Menu Settings

      To access the settings of a Menu view, simply hover over the view and click on the pencil icon that appears at the top left corner.

      In the Menu settings, you can edit aspects of the menu such as the title, description, format, and design of the Menu view.

      menus2

      • Link to a new page: This option allows you to easily create a link to a new page within your app. You will be guided through the setup process to add your new page.
      • Link to an existing page: This option allows you to add a link to a page that already exists in your app. You have the flexibility to choose another parent page or a page that originates from a Menu view on a parent page.
      • Link to a URL: This option allows you to include a link to an external website.
      • Title: This option allows you give your menu view a title that will appear above the view.
      • Description: This setting will appear alongside the title above the Menu view. Descriptions provide valuable context to users about the links in the Menu view.
      • Tabbed Menu: Menus can be customized to show as buttons or tabs. By default, the buttons are separated, but if you enable the Tabs option, the menu button will be visible even on child pages and the tabs will stay on the page as you click through them.
      • Auto Link: When the Menu is set to the tabbed option, you can use the Auto Link feature to guide users to the first link in the Menu view. The active menu is highlighted by a downward arrow, and the Menu will remain visible as you navigate through any child pages.

      menus3

       

      Editing Menu Buttons

      To modify existing Menu buttons, simply interact with the individual buttons on the page preview. From there, you have the ability to update link properties, rearrange the order of links, and delete links as needed.

      menus4

       

      Link Properties

      To edit each menu link, simply hover over the Menu link in the page preview and click on the pen icon to open the editor.

      • Page: This section of the Link Properties displays a link to the page your link redirects to when clicked.
      • Link Text: Here, you have the option to modify the text that will be displayed in the button on the Menu view.
      • Icon: Icons can be added when adding or editing a button in the menu view. From the "Link Properties" section when editing a link, you can select the “add icon” text to choose an icon.
        • When selecting an icon, you can also edit the alignment:
          • Left: The icon will appear on the left side of the button text.
          • Right: The icon will appear on the right side of the button text.
      • New Window: By enabling this option, all button links will open in new windows in your browser.
      • Link Preview: A tab link will show as active on linked child pages with an underline, fill, or outline of the active tab. This setting is available when you have the "Tabbed Menu" setting checked in the Menu view's settings. 
        • In the Live App Design settings for Menus, you can customize the styling of the Link Preview within the Tabs section which provides you with a preview of how tabs will appear in the Live App. 
      • Link Design: Within this section, you have the ability to personalize the design settings for the links in your Menu view. These settings will take precedence over the global menu design settings.

       

      Link Order

      To rearrange the order of the Menu buttons, simply click and drag a button to a new position on the Menu view in the page preview.

       

      Delete Links

      To remove a Menu button, simply hover over the button in the page preview and click on the trashcan icon.

      Caution: If the link is connected to a child page, deleting the menu button will also delete that page. However, if another page also links to the child page, that other page will become the parent page once the Menu button is deleted.

       

      Menu Design Settings

      Within the Live App Design settings in the Builder, you can customize global design settings for Menu formats:

      menus5

      Tip: You can learn more in our support article here: Live App Design

       

      Notes and Troubleshooting

      Menu Isn't Displaying on Mobile Devices:

      In the event that the colors of the Header, Page Menu, and Submit are identical, it may give the impression that menus are not visible on your mobile device. To address this, you can verify and modify the colors of your app in the Live App Design section of the Builder.