Link Group Elements

What You'll Learn

In this guide, you'll discover how to use Link Group elements to create intuitive navigation in your Knack app. You'll learn to build both button and tabbed links, link to internal pages or external sites, and customize the appearance of your navigation to match your app's design. Effective navigation is key to user experience, and this guide will help you build links and menus that make your app more accessible and easier to use.

What is a Link Group Element?

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

Link Groups are a handy tool for organizing multiple pages and elements. 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 element from a menu element.

What do Link Groups Look Like in a Live App?

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

Managing Menus

To learn how to add, edit, and delete elements from your app, see our Elements Overview article.

Link Group Settings

To access the settings of a menu element, hover over the element and click on the pen 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 element:

The following options are available in the menu element's settings:

Link to a new page: 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: Add a link to a page that already exists in your app. You can choose another parent page or a page that originates from a menu element on a parent page.
Link to a URL: Include a link to an external website.
Title: Give your menu element a title that will appear above the element.
Description: Add text that will appear alongside the title above the menu element. Descriptions provide valuable context to users about the links in the menu element.
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 element. The active menu is highlighted by a downward arrow, and the Menu will remain visible as you navigate through any child pages.

Editing Menu Buttons

To modify existing menu buttons, interact with the individual buttons on the page preview. From there, you can update link properties, rearrange the order of links, and delete links as needed.

Link Properties

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

The Link Properties editor offers a range of options for customization:

Page: This section displays a link to the page your link redirects to when clicked. To modify the page linked to your menu link, you cannot edit it directly. Instead, you will need to delete the menu link and create a new one with the desired page.
Link Text: Modify the text that will be displayed in the button on the menu element.
Icon: Icons can be added when adding or editing a button in the menu element. You can select the "+ Add Icon" button to choose an icon.

When selecting an icon, you can also edit the alignment in the Edit Icon modal pop-up:
- 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 element'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 can personalize the design settings for the links in your menu element. 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 element in the page preview.

Deleting Menu Links

To remove a menu button, 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. These settings will apply to all menu elements within your application.

The Link Design settings in the Link Properties section take precedence over the global menu element design settings shown in the image above. These settings apply specifically to the individual menu element.

Tip: You can learn more in our Live App Design documentation.

Troubleshooting

Menu Isn't Displaying on Mobile Devices

In the event that the colors of the header, page menu, and buttons 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.