Navbars
How to add and style navbars.
Last updated
Was this helpful?
How to add and style navbars.
Last updated
Was this helpful?
A navbar is a navigation bar on the top of the page. Navbars typically provide a structured and easy-to-access means of navigating between different pages, often containing links, icons, or buttons that direct users to various parts of the site or app.
Location in the Parts Library: Base Parts > Navigation > Navbar
Navbars are useful for several reasons. They:
Are A Primary Navigation Tool: Navbars serve as the primary tool for navigation, helping users quickly find and access the main sections or features of a website or app. This makes it easier for users to explore and utilize the content and services offered.
Enhance User Experience: A well-designed navbar enhances the overall user experience by providing a clear and intuitive way to navigate. Users can easily locate important links and functions, which reduces frustration and increases satisfaction.
Provide Consistency and Familiarity: Navbars provide a consistent navigation structure across different pages and sections of a website or app. This consistency helps users understand how to navigate the site more quickly, as they know where to look for navigation options.
Space Efficiency: Navbars make efficient use of screen space by consolidating navigation links into a compact area. This is especially important for responsive design, where space is limited on smaller screens like smartphones and tablets.
Improve Accessibility: Navbars contribute to the accessibility of a website or app by ensuring that navigation options are easily reachable and clearly labeled. This is important for users with disabilities who rely on assistive technologies to browse the web.
Improve Visibility of Key Features: By placing key features and sections in the navbar, websites and apps can highlight important content or actions, making them more visible and accessible to users. This can drive engagement and ensure users find what they need.
Are Responsively Designed: Navbars are adaptable to different screen sizes and devices. Responsive navbars, such as hamburger menus on mobile devices, ensure that navigation remains user-friendly regardless of the device being used.
Yes, all apps come with a navbar, even the skeleton app. The navbar can be removed if you don't want it there. The navbar can be edited as appropriate or switched out for one of the navbars in the parts library, then edited as needed.
Your navbar can contain several items, including icons, buttons, dropdowns, menus, links, avatars, and input fields for example.
To add a link to your button, first select the button. On the right editor menu, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.
The image will take up the full background space of the navbar.
Adjusting the Image Opacity
More information on navbars is coming soon.
Like many other parts, , , , , , , and can be adjusted using the property editor on the right, once the navbar, or parts within the navbar, have been selected.
To add a to a navbar, select the navbar. In the property editor on the right, click on Image > Default to select your image from the Media Gallery or upload an image from your device.
Adjusting the of the menu image is the same as adjusting the opacity of a regular image. Go to the Decoration Editor in the right property menu, and go to the ‘Image Opacity’ tab. You'll need to get the opacity of the image right so that you can adequately see the contents of the navbar.
Icons
Buttons
Images
Menus
Dropdowns
Links
Avatars
Customizing and formatting
