Skip to main content

How to set up your navbar

Customize the navbar to improve app navigation by adding icons, linking actions, and adjusting colors.

A
Written by Amr Alshareef
Updated today

Overview

The navbar (navigation bar) is a customizable menu that appears at the bottom of your app. It helps users access key features quickly by adding action icons that link to pages, plugins, or functions in your app. You can also control the layout, style, and color scheme to match your branding.

Required

  • Navbar setup is available on all plans

  • You must have your plugins already added to your app to link it through the navbar

How to set up your navbar

  1. Log in, go to Navigation in the left-hand navigation.

  2. Click the Nav Bar tab.

  3. Click Turn on to enable.

  4. Click Add Action Item to add your first icon:

    • Choose an action (e.g., select a plugin or page).

    • Add your Action Button Text.

    • Add your Icon:

      1. You can keep the pre-selected icon or select a new icon image by clicking the X by hovering over the icon.

      2. Click the +.

      3. Select an image from the Glyphicons (icon library), by uploading your own image, or searching using the Stock or AI tabs.

      4. Click Insert Icon(s).

    • Click Save.

  5. Managing your Actions

    • To delete an item entirely, click the X on that action item.

    • To reorder the icons:

      1. Click and drag the three-line icon next to each item.

    • To replace an icon:

      1. Click the pencil for the action.

      2. Hover over the icon to click X to remove the existing icon.

      3. Click the + icon to upload or choose a new image.

      4. Click Save.

    • To change navbar colors:

  • Go to Branding in the left-hand navigation.

  • Go to the Colors section.

  • Adjust Nav Bar Background and Nav Bar Icons colors by selecting a color or entering a hex code (be sure to include the #).

  1. Under the Options & Style Header, you can:

    • Enable Shadow: Adds a drop shadow to the navbar.

    • Enable Tile Border: Adds a border around the entire navbar.

    • Enable Items Border: Adds a border around individual icons.

Pro tips

  • Use simple, recognizable icons for better user experience.

    • You can search free icon libraries online for different styling options.

  • Keep the number of icons to a minimum (3–5) to avoid crowding.

  • Match navbar icon colors with your app’s branding for a polished look.

  • You can toggle your Navbar on and off without losing your work.

Troubleshooting tips

  • Icons not showing: Make sure the navbar is toggled on and icons are saved.

  • Icons appear gray: Check your color settings under Branding > Colors.

  • Actions not working: Confirm each icon is linked to an active plugin or valid action.

Did this answer your question?