Navigation
The navigation section of the design tab allows you position and style the app navigation bar as well as the available navigation links.
Settings
Click on the navigation icon in the Component Tree to access the navigation settings.
The list of properties that can be changed for the navigation bar are displayed in the table below.
Name | Description | Visual |
---|---|---|
Position | Will anchor the nav bar to the top or left hand side of the page. | |
Sticky header | Top anchored nav bar only. When scrolling down the page, the nav bar will remain visible at the top of the page. | |
Width | Top anchored nav bar only. The width of the nav bar content. | |
Title | Show/Hide the specified nav bar title. | |
Background color | The background color of the nav bar. | |
Text color | The color of the nav bar title and links. |
Below is a video that shows how each of the settings present in your app.
By default the navigation bar is visible for all Screens, however it can be turned on a per screen basis.
Configure links
The links shown in your navigation bar can be configured in the navigation panel by clicking on the 'Navigation' icon in the Component Tree and then the Configure links
button in the Settings Panel.
This will bring up a drawer from which you can specify the names of the links, the path and minimum user role to see the link.
The links can be external URLs, or they can be screen paths selectable from the dropdown menus.
The minimum user app role will ensure that only authorised users will see particular navigation links.
By default the minimum role is public.
Logo
By default the navigation bar will show the Budibase logo, but there are a number of settings available to customise this under the Logo section of the navigation settings.
Name | Description |
---|---|
Show logo | Toggle off to hide the logo from the nav-bar. |
Logo image URL | Allows you to replace the Budibase logo with a custom image. |
Logo link URL | If provided, turns your logo into a hyperlink. This can be a screen (such as Home), or to an external webpage. |
New tab | Logo hyperlinks will be opened in a new tab. |
Updated about 1 month ago