Skip to main content

App tabs

App tabs are the highest level of navigation in your app.

Updated over a month ago

Tabs are the highest level of navigation in your app. The tabs you choose will determine the basic organizational structure of your app and the way users traverse your content. App tabs are presented in a tab bar at the bottom of your app on mobile and in a header at the top of your app on desktop. You can add up to 4 custom tabs to your app. Each tab can be configured to open a different page, collection, or content item in your app.

Adding tabs

Click the “Add tab” button from the ”Tabs” screen in your dashboard. If you haven’t created an app page yet you may want to do that first so you have something for the tab to open. For each tab you can specify:

  • Title: Set the title that will be displayed on the tab. We recommend a short, one-word title to avoid truncation on small mobile devices.

  • Icon: An icon to be displayed on the tab on mobile. See “Icons” below for tips.

  • Link: The custom app page, content, or collection that should open when the tab is selected.

The home tab

The first tab in your tab list will be your “Home” tab. This is the tab that will be selected by default when a user opens your app. Whatever page this tab is configured to open will be your home page.

Icons

You can customize the icon shown on the each tabs by uploading an SVG image.

Tab icons should be square SVGs. Advanced SVG features like embedded text, raster images, and gradients are not supported. The app sets the color of each icon based on the context in which it is shown, so any colors in the SVG images that you upload will be ignored.

There are a number of sites where you can find free icons for commercial use without attribution, such as https://uxwing.com or https://www.svgrepo.com. There are also some sites like https://thenounproject.com/ that offer royalty-free licenses to SVG icons for a nominal fee.

Limitations

  • You may add up to 5 custom tabs to your app. This constraint is due to the limited horizontal space available on smaller mobile devices.

  • Tabs can only link to pages, content, and collections within your app, not external web URLs. If you would a tab to open a web page then you can try embedding the web page in your app as a Web content item.

Did this answer your question?