--- title: How to set up your navbar description: Customize the navbar to improve app navigation by adding icons, linking actions, and adjusting colors. --- [Skip to content](https://help.buildfire.com/how-to-set-up-your-navbar#main-content) [![buildfire](https://help.buildfire.com/hs-fs/hubfs/bf-wordmark-black.png?width=150&height=35&name=bf-wordmark-black.png)](https://help.buildfire.com?hsLang=en-us) Open main navigation Close main navigation - [Log In](https://app.buildfire.com/login) [Log In](https://app.buildfire.com/login) How can we help you? - There are no suggestions because the search field is empty. 1. [Buildfire Help Docs](https://help.buildfire.com/?hsLang=en-us) 2. [Build Your App](https://help.buildfire.com/build-your-app?hsLang=en-us) 3. [Building Your App's Navigation](https://help.buildfire.com/build-your-app?hsLang=en-us#building-your-apps-navigation) # How to set up your navbar ## Customize the navbar to improve app navigation by adding icons, linking actions, and adjusting colors. 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: 6. Go to **Branding** in the left-hand navigation 7. Go to the Colors section 8. Adjust **Nav Bar Background** and **Nav Bar Icons** colors by selecting a color or entering a hex code (be sure to include the #) 9. 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. - [Buildfire Control Panel](https://help.buildfire.com/buildfire-control-panel?hsLang=en-us#main-content) - [Navigating the Control Panel](https://help.buildfire.com/buildfire-control-panel?hsLang=en-us#navigating-the-control-panel) - [Global Tools](https://help.buildfire.com/buildfire-control-panel?hsLang=en-us#global-tools) - [Terms & Policies](https://help.buildfire.com/buildfire-control-panel?hsLang=en-us#terms-policies) - [Build Your App](https://help.buildfire.com/build-your-app?hsLang=en-us#main-content) - [Global Settings](https://help.buildfire.com/build-your-app?hsLang=en-us#global-settings) - [Building Your App's Navigation](https://help.buildfire.com/build-your-app?hsLang=en-us#building-your-apps-navigation) - [Building Your Login Flow](https://help.buildfire.com/build-your-app?hsLang=en-us#building-your-login-flow) - [Building a PWA](https://help.buildfire.com/build-your-app?hsLang=en-us#building-a-pwa) - [Add Functionality To Your App](https://help.buildfire.com/add-functionality-to-your-app?hsLang=en-us#main-content) - [Plugins to drive engagement & community](https://help.buildfire.com/add-functionality-to-your-app?hsLang=en-us#plugins-to-drive-engagement-community) - [Plugins to drive monetization](https://help.buildfire.com/add-functionality-to-your-app?hsLang=en-us#plugins-to-drive-monetization) - [Plugins to run operations & workflows](https://help.buildfire.com/add-functionality-to-your-app?hsLang=en-us#plugins-to-run-operations-workflows) - [Plugins to show content & media](https://help.buildfire.com/add-functionality-to-your-app?hsLang=en-us#plugins-to-show-content-media) - [Make Money With Your App](https://help.buildfire.com/make-money-with-your-app?hsLang=en-us#main-content) - [Overview](https://help.buildfire.com/make-money-with-your-app?hsLang=en-us#overview) - [Apple/iOS](https://help.buildfire.com/make-money-with-your-app?hsLang=en-us#apple-ios) - [Google/Android](https://help.buildfire.com/make-money-with-your-app?hsLang=en-us#google-android) - [Publish Your App](https://help.buildfire.com/publish-your-app?hsLang=en-us#main-content) - [Overview](https://help.buildfire.com/publish-your-app?hsLang=en-us#overview) - [Apple/iOS](https://help.buildfire.com/publish-your-app?hsLang=en-us#apple-ios) - [Google/Android](https://help.buildfire.com/publish-your-app?hsLang=en-us#google-android) - [Manage Your App](https://help.buildfire.com/manage-your-app?hsLang=en-us#main-content) - [Managing Your App’s Users](https://help.buildfire.com/manage-your-app?hsLang=en-us#managing-your-apps-users) - [Push Notifications](https://help.buildfire.com/manage-your-app?hsLang=en-us#push-notifications) - [Analytics](https://help.buildfire.com/manage-your-app?hsLang=en-us#analytics) - [Connect External Partners](https://help.buildfire.com/connect-external-partners?hsLang=en-us#main-content) - [Google/Android](https://help.buildfire.com/connect-external-partners?hsLang=en-us#google-android) - [Apple/iOS](https://help.buildfire.com/connect-external-partners?hsLang=en-us#apple-ios) - [Zapier](https://help.buildfire.com/connect-external-partners?hsLang=en-us#zapier) - [Meta](https://help.buildfire.com/connect-external-partners?hsLang=en-us#meta) - [Segment](https://help.buildfire.com/connect-external-partners?hsLang=en-us#segment) [![Group 4578 (1)](https://help.buildfire.com/hs-fs/hubfs/Group%204578%20(1).png?width=140&height=33&name=Group%204578%20(1).png "Group 4578 (1)")](https://buildfire.com/) Copyright © 2026, Buildfire