Bottom Navigation

How to add and style Bottom Navigation.

What is Bottom Navigation?

Bottom navigation refers to a navigation bar positioned at the bottom of a web or mobile app. This navigation pattern is particularly common in mobile app design but can also be found in web applications, especially those optimized for mobile use. The bottom navigation bar typically contains a few key actions or destinations, represented by icons and sometimes labels.

Location in the Parts Library: Base Parts > Navigation > Bottom Navigation

Bottom Navigation Examples

Bottom navigation is often used in scenarios where:

• There are a few primary sections or features within the app or website that users need to access quickly and frequently.

• It’s particularly effective for mobile devices, where screen space is limited, and easy access to navigation controls is essential.

• When a consistent and persistent navigation method is needed across different screens within the app or site.

What is the Difference Between Bottom Navigation and Footers?

While both bottom navigation and footers are positioned at the bottom of the interface, they serve different purposes and contain different types of content. Bottom navigation is designed for quick and easy access to primary sections of an app or site, enhancing usability and user experience, particularly on mobile devices. Footers, on the other hand, provide supplemental information, secondary navigation links, and various resources, contributing to the overall structure and credibility of the website or app.

Key Differences

Purpose

Bottom Navigation: Focuses on primary navigation between key sections or features.

Footer: Provides additional information, secondary navigation, and resources.

Content

Bottom Navigation: Contains a limited number of navigation items for quick access.

Footer: Can contain a variety of information and links, often more extensive and detailed.

Usage Context

Bottom Navigation: Commonly used in mobile apps and mobile-optimized websites for ergonomic navigation.

Footer: Used in both desktop and mobile contexts, offering comprehensive site information and links.

Adding Bottom Navigation

Choose the bottom navigation part most closely aligned with what you need from the Parts Library, and click ‘+ add to page’. The bottom navigation will automatically be added to the bottom of the canvas.

Editing and Formatting Bottom Navigation

Like many other parts, colors, borders, shadow, opacity, rounding, sizing, and spacing can be applied using the property editor on the right, once the bottom navigation has been selected.

Any text within the bottom navigation is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.

• Block

• Wide

• Variants

• State

Adding a Background Image to the Bottom Navigation

To add a background image to the bottom navigation, select the bottom navigation, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.

More information on Bottom Navigation is coming soon.

Related Information

Icons

Background images

Customizing and formatting

Related Information