Logo
For example "scheduled tasks"
Search
Info
Content
Component
Menu
Type
Navigation
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages (Alpha)

    PDF Pages 2.0

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📗 System Components
Menu

Menu

What is the Menu Component? 

The menu component is a System Component that, when added to a page or layout, adds a navigation menu bar with links to route users to specific pages or other system components. 

menu-image.png

 

Adding menus

You can add a menu component to a page or layout by adding it within an existing column, similarly to how you would add any other component. You can then select the menu component from the list of System Components.

2022-01-28_00-22-26.png

A new window will pop up prompting you to add items to your new menu by clicking on the +Add New Item button.

2022-01-28_00-25-21.png

Enter the name of the item as you would like it to appear on your menu on the live app and select the item type. 

2022-01-28_00-29-04.png

Menu item types

There are five types of items that can be added to a menu:

  1. Page

  2. Link

  3. Text

  4. Image

  5. Special Link

Let's define each menu item type.

Page

Adding a Page item type to your menu refers to adding a link to any parent page in your app to your menu.

As a reminder, parent pages are pages at the top level of your app's list of layouts and pages, and aside for the three default pages that are built-in to each app (the login, sign up, and profile parent pages), parent pages are those that you manually create by adding a new page as opposed to child pages which are dynamically created via components (Details, Edit, and Add New child pages). When adding a page to your menu, you can not link to child pages, rather only to parent pages. 

To add a page link to your menu, enter the name of the page link as you want it to appear on your menu on the live app, select "Page" as the item type, and select the parent page you want users to be routed to when clicking on this link within this menu.

2022-01-28_00-30-30.png

As you can see in the image below, this menu now has a link to the Time Sheets parent page using the display name “Time Sheet Hours”. No matter how many additional items are added to this menu, when users click on the Time Sheet Hours link on this menu they will be routed to the Time Sheets page. 

live-app-menu.png

 

Link

Select the Link item type to add a website link to your menu. The link can be to any external website or to a page within your app.

2022-01-28_11-01-27.png

As you can see in the GIF below, this menu now has a link to the tadabase.io website.

ezgif-link-menu.gif

 

Custom

Select the custom item type to add any text to your menu. Text added to the menu as a text item type will not be a clickable link, rather the text can be used as a separator or placeholder text on your menu. For instance, you can add a text item to your menu to add a slogan following your logo on the menu.

2022-01-28_11-19-05.png

Once a logo image item is added to your menu as well, the menu can appear as such:

2022-01-28_11-20-50.png

 

Image

Select the Image item type to add an image, such as a logo, to your menu. 

2022-01-28_11-22-21.png

You can choose to link a URL to the image, making it a clickable image that will route users to your desired website when clicked. 

image-menu.png

As you can see in the GIF below, the logo image on this menu links to the tadabase.io website when clicked. 

image-link-menu.gif

 

User Links

Select the User Links item type to add a link to a user-related function, such as Login, Profile, Logout, and Sign Up, to your menu. 

2022-01-28_11-33-49.png

Adding User Links to your menu is functionally equivalent to adding a User Menu system component to your page/layout. Learn more about the User Menu to determine which method works best for your app needs. 

There are four types of User Links you can add to your menu to route users to accomplish a specific user-related function:

  1. Login Link
  2. Sign Up Link
  3. Profile Link
  4. Logout Link

Let's define each type of Special Link you can add to your menu.

Login Link

Add a Login Link to your menu to route users to the default login page. 

Adding a Login link to your menu is functionally equivalent to adding a page link to the default login page. However, the Login link is "special" because using this method results in the Login link disappearing from the menu when a user is logged in. 

Sign Up Link

Add a Sign Up Link to your menu to route users to the default sign up page. 

Adding a Sign Up link to your menu is functionally equivalent to adding a page link to the default sign up page. However, the Sign Up link is "special" because using this method results in the Sign Up link disappearing from the menu when a user is logged in. 

Profile Link

Add a Profile Link to your menu to route users to the default profile page. 

Adding a Profile link to your menu is functionally equivalent to adding a page link to the default profile page. However, the Profile link is "special" because using this method results in the Profile link disappearing from the menu when a user is logged out. In other words, when using a profile link as opposed to a page link to the default profile page, the profile link will only appear on the menu when a user is logged in.

Logout Link

Add a Logout Link to your menu to log users out of your app when clicked. When users click on the Logout link and logout, you can choose to custom-route specific users to a specific page based on their user roles. 

2022-01-28_11-36-06.png

 

New window

When adding items to a menu that are clickable links, you can choose whether the link should open as a pop-up. At default it opens the link in the current page. 2022-01-28_11-38-26.png

 

Menu item alignment

When adding items to a menu, you can choose to align items to the Left or Right of the menu.

menu-alignment.jpg

At default, the Alignment setting is set to Left. 

2022-01-28_11-40-57.png

 

Adding icons

You can add icons to each menu item to enhance the appearance of your menu: 

2022-01-28_11-42-23.png

 

Renaming Menus

Every new menu is automatically named in order in which it was created. For instance, the newly created menu below has the default name of "Menu 2" as this is the 2nd menu created within this particular app.

You can rename menus within the menu's Options tab in order to more easily identify menus when assigning pages to particular menus. 

Now, when adding a new page in the Page Builder, you can easily link that page to a particular menu by identifying the menu's name within the drop-down list of your app's menus.   

2022-01-28_12-02-16.png

You can link a page to a particular menu either when adding the page in the Page Builder and selecting the menu from the drop-down list of existing app menus, or by adding the page as an item to a particular menu as demonstrated above within this article. 

Menu style

Within the Settings tab of a menu, you can change the menu style from horizontal to vertical. 

2022-01-28_12-03-17.png

By default, all menus are structured horizontally and appear as such:

By changing a menu's style to vertical, the menu would appear as such

2022-01-28_22-12-57.png

 

 

Keep in mind, changing a menu's style to vertical will also change the structure of the layout, making the Page Container within the row of the menu. Please keep in mind that this may add some limitations in restricting the granular permissions over this row. 

2022-01-28_22-13-57.png

 

If you would like a full-length menu as seen bellow. This requires a bit of CSS code. 

You can see in the GIF below that the menu changes from partial to full-length by using CSS.

You can go to your layout pages setting, click CSS, and copy and paste the code below. 

.navbar{
bottom: 0;
top: 0;
left: 0;
height: 100vh;
margin: 0;
overflow: inherit;
position: fixed;
width: 317.16px;
z-index: 1049;
}
.content-container{
margin-left: 317.16px;
}
@media (max-width: 768px){
.navbar{
height: auto;
position: inherit;
width: auto;
}
.content-container{
margin-left: auto;
}
}

.dropdown-submenu:hover>.dropdown-menu {
display: none;
}

Child Menu Items

To add a child menu item to a menu, click on the "+" icon within the parent menu item that you would like to add the child item. You can then name and configure your child item just as you would any other menu item.  

2022-01-28_22-30-10.png

As a result, your menu will include a child menu item as a drop-down option within its parent menu item. You can add multiple child items under a parent item.

You can add multiple levels of child menu items.

How did we do ?

Previous Article
System Components Overview
Next Article
User Menu
Article Navigation
  • What is the Menu Component?
  • Adding menus
  • Menu item types
  • Page
  • Link
  • Custom
  • Image
  • User Links
  • Login Link
  • Sign Up Link
  • Profile Link
  • Logout Link
  • New window
  • Menu item alignment
  • Adding icons
  • Renaming Menus
  • Menu style
  • Child Menu Items
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational