Skip to main content

Web Navigation

Applicaster supports a range of navigation elements allowing to connect to screens or actions. On the Web, Responsive Navigation Bar and Nested Footer Are Supported.

Websites are accessed on a variety of devices, from desktops to smartphones; therefore, the navigation must be responsive. To achieve this, we use breakpoints.

Breakpoints are a fundamental concept in responsive web design, ensuring that a website’s layout adapts effectively to different screen sizes and devices.

Why Use Breakpoints

  • Responsive Design: To make the Website adaptable to various screen sizes and orientations.
  • User Experience: To optimize the appearance and usability on all devices.
  • Performance: To load and display the necessary elements based on the device, ensuring efficient resource use.

There are four breakpoints in the Studio:

  • Mobile: 0-640px
  • Tablet: 641-1024px
  • Desktop: 1025-1344px
  • Large Desktop: 1345 and above

Responsive Navbar Structure​

The website uses one Responsive Navigation Bar. Inside the Navigation Bar, there are Breakpoints; one for each device.

Each breakpoint consists of Containers that shape the navigation structure.

Containers are designated areas within the responsive navbar where components such as buttons, drawers, and menu lists can be added. These containers can be positioned on the left, center, or right side of the navbar. Each breakpoint allows for different container settings, enabling a more user-friendly and adaptable layout across various screen sizes.

There are three containers:

  • Left Container
  • Center Container
  • Right Container

Each container can include Items. An item refers to any individual element or component; it can include interactive elements like buttons, drawers, and menu lists, and are designed to perform specific functions or provide information to users.

Items that are available:

  • Menu List: A grouped list of navigation items that are styled consistently.

  • Button: A clickable element, either an asset or text, independently styled to direct users to pages.

  • Account Button: Displays states for logged-in or logged-out users.

  • Drawer: Includes a button to expand and reveal additional navigation options.

Configuration​

Add a Responsive Navbar to your layout.

Add Breakpoints to the Responsive Navbar.

note

It is mandatory to create at least the Mobile Breakpoint. If no other breakpoints are defined, the Mobile Breakpoint will automatically be applied to all other breakpoints.

Assign each breakpoint accordingly.

Add containers to each breakpoint.

Add Items.

The website footer is the section at the bottom of a web page. It is automatically responsive, adjusting to different devices.

There are six types of items that can be added to the footer:

Nested Footer Horizontal Section: Divides the footer into groups of items displayed in a row format.

Nested Footer Grid Section: Divides the footer into groups of items displayed in a grid layout.

Grid Section Column: Organizes the grid section into individual columns.

Icon Link Item: Displays icons (e.g., social media icons) that link to external websites.

Nav Item Link: A clickable text link.

Nav Item Text: Unclickable text, typically for informational purposes.

Nav Item Cookie Settings: A link or section related to cookie preferences or settings.