Navigation settings
Customize navigation of your app.
Navigation is how your Softr app users move around in your app and it describes menus that you can setup to accomplish this. You can customize your users’ experience by defining which navigation they see, which buttons they see, what those buttons do, and even show tablet and mobile-friendly navigation layouts.
Much of what your app Navigation does and shows depends upon your User Authentication settings and the Pages available in your app. We recommend reading up on those before exploring this article.
When you create a Softr app, you’ll be given a default Navigation bar. This default navigation cannot be deleted, but it can be turned off or modified to suit your needs. You can also create multiple Navigations and choose which pages each navigation should be on.
Setting up page navigation
To turn on Navigation for a page, go to the page settings and select the Navigation dropdown. Here you can choose to either turn off the navigation for the page, select an existing navigation, or create a brand new navigation. Any new navigations you create can also be used on other pages.
Selecting the navigation block will open up its settings where you can edit all of its settings. These settings will be applied to any page this Navigation is on.
Content
With the navigation block selected, you will be able to change the Navigation’s name and see the Content tab where you can adjust various settings for your navigation.
Layout
Clicking the layout pane will allow you to set the Navigation to either side nav, top nav, or both. You can also adjust the navigation layout for both Desktop or Mobile/Tablet by clicking on the corresponding icon.
Logo
Choose to show either the banner (horizontal) version of your logo or the icon (square) version of your logo. You can set the logo in your app’s General settings.
Links
The Links section allows you to provide clickable text for your users to navigate around pages in your app or link out to external websites. You can organize links into the primary or secondary sections and even place links inside categories for better menu structure. To add a new link or category of links, simply click the + Add button in either the primary or secondary sections. To reorder pages in the stack, simply click and drag on the page name.
On any link you add, you can set the name, icon and an optional subtitle . Depending on the type (page, external URL, or category), you can also define other parameters as well like the link location and where it should be opened. When choosing Open page as the action, all of your existing pages will be available to choose from.
You can also adjust the links on Desktop and Mobile/Tablet separately (1), toggle on the heirarchy lines within categories (2), and control which links are visible to certain user groups (3).
Buttons
Buttons work much the same as links, but are visually shown with a background instead of just clickable text. You can adjust button visibility for Desktop or Mobile/Tablet as well as the visibility of buttons for specific user groups. In contrast to links, Buttons do not have the option for categories.
User Menu
If this is turned on, your users will be able to navigate to their Account Settings page and Sign Out of their account. These two options are required and cannot be deleted if User Menu is turned on. You can also add additional links and pages to this menu though if needed. We recommend always turning on User Menu if you have Login enabled for your app.
Styles
In addition to the Content Tab, clicking on the Styles tab at the top of the Navigation settings will bring up some options for customizing the look and feel of your Navigation. You can adjust the styling separately for Desktop and Mobile/Tablet.
The Styling select dropdown will show 3 main options, all of which are derived and adjusted automatically based on the settings in the Theme menu:
- Regular - This will adjust the navigation styling to match the background colors in the Theme menu.
- Accent - This will adjust the navigation styling to match the accent colors in the Theme menu
- Soft Accent - This will adjust the navigation styling to be a lightened shade of the accent color in the Theme menu.
You can also adjust the overall size of the navigation. This affects font size, button size, icon size and margins. In addition to size, you can change the rounding of the buttons.