Navigation Components

Transcript Summary

Introduction

Hello Tadabasers, Sam here. In this video, we’re going to talk all about the navigation components in Tadabase.

We will cover:

• Menu
• User Menu
• Breadcrumbs
• Link Buttons

Adding a Menu

When you are creating your app layout, you may want to add a navigation system at the top of your page to help users navigate to other pages. This is where the menu component comes in.

To add a menu:

1. Open your components.
2. Go to your system components and choose the menu option from the dropdown.
3. Add a column and place your menu there.

Once the menu is added, it will say, "Menu doesn’t contain any items." You can add new items, which will appear at the top of your layout. You can name them however you like, and choose different actions that occur when someone clicks on the item (e.g., navigate to a page, link, custom item, etc.).

Let’s preview a page to see how the menu looks.

Example of Menu in Layout

In many cases, it's best to place the menu at the layout level, so it appears across all pages using that layout. For instance, if a student logs in, they might see a student menu at the top, while an instructor would see a different menu on their layout.

Let’s preview the page. At the top, we see the menu, including links to the course catalog, course enrollment, and more. You can also include a logo and links to other pages.

Adding Items to the Menu

Let’s go back to the menu setup and explore the different options:

• Page: This allows you to link to a specific page. Name it appropriately, so users know where they’re navigating.
• Link: You can add an external link, such as Google.
• Custom: Allows you to insert custom HTML.
• Image: Often used for logos.
• User: Links like login, sign up, profile, or logout.

You can also choose the alignment of menu items (left or right) and add sub-items under each menu option.

User Menu

The user menu is a common navigation component found on many websites, allowing users to log in, sign up, view their profile, and log out.

You can configure it to:

• Show registration links.
• Display the user's profile image.
• Display the login page in a pop-up or modal.

Let’s preview the page. At the top, we see the user menu with login and signup options. When clicking "Login," it opens as a pop-up, allowing users to log in without leaving the page.

Once logged in, the user will see options for "Profile" and "Logout." The profile page will display details like name, email, and an option to upload or change their profile image.

Logout Redirect Rules

You can set up redirect rules for when a user logs out. For instance, you can redirect them to the login page after logging out. These rules can be set for all users or by role (e.g., customers or admins being redirected to different pages).

Breadcrumb Component

The breadcrumb component helps users navigate by showing a trail of pages. For example, if a user is on a details page, the breadcrumbs will display "Home > Sample Page > Details."

Let’s preview the breadcrumb functionality:

1. We start on the sample page.
2. Clicking "Details" adds another breadcrumb, showing the trail of navigation.

This makes it easier for users to navigate back to higher-level pages.

Link Button

The link button allows you to place a button on a page that, when clicked, takes the user to a specific page or URL. You can customize the button's CSS and placement on the page.

For example, we added a link button at the bottom of the page that takes users to the sample page. This button can be placed in various parts of your app to facilitate navigation.

Conclusion

In this video, we covered the following navigation components:

• Menu: For navigation across pages.
• User Menu: To manage user actions like login, profile, and logout.
• Breadcrumbs: To show a trail of navigation through subpages.
• Link Button: For easily adding buttons that navigate to other pages.

Thank you for watching, and have a great day!