(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
TabBar Menu Design

Tabbar menus are the menus that are mostly found at the bottom edges of mobile applications. While the menu items for the most frequently visited screens are located here, a larger menu list can be presented with a drawer that opens from the bottom edge.

We need to prepare the menus to be added as tabbars at the bottom of each screen and for the footer element. The additional menu list to be opened by sliding from the bottom edge into the screen with the Drawer method should also be prepared as another screen.

Open the screen where you will add the tabbar menu. Add the footer element with drag and drop. Drag a row element into the footer and divide it by the number of columns you plan to have in the tabbar. We will prepare a menu with icon and menu item text. First add a spacer element in the column to be able to adjust their spacing. Then add the icon and label element in it. Select the Spacer element and change the content sorting direction to vertical. Arrange the two element spacing to 4px.

Select the icon element and replace the icon with a dashboard type icon using properties. Type Dashboard in the text of the label element below. We've added our first menu item. You can edit the properties of both icon and label elements, such ascolor and size, with the Typography section of the styling panel. You can use the layout in the Styling panel to align the related elements in the colon.

Next, select the Spacer element and copy it from the handle menu. For this process, you can use the keyboard shortcut Control + C for windows users, Command + C for macos. Select the next column and paste it using the handle menu. You can use the shortcuts for the paste operation as well as for the copy operation. Add other menu items by changing the properties of the icon and label elements.

You should use navigation actions to ensure that when we click on one of the menu items, it can switch to the relevant screen.

When navigating to menu items, it would be better to give it to its parent column, not the item name. Thus, the touch area for users will be a larger surface. Select the Column element, which is the parent of the Dashboard menu item. Add the navigation action. In order to open the screen selected in the menu directly, select the Current screen and the screen to be opened from the list.

Similarly add navigation actions to other menu items.

We can make the menu in the list open from the bottom edge. We want it to open when the last menu, the hamburger menu icon, is clicked. Give the hamburger icon a Navigation action. Select the screen to open. Add the action by selecting the opening type as Drawer and the direction as the bottom edge.

Now generate the application with the preview button. Open the Inspect view so that the browser can view the screen as it does on mobile devices. You can also use the F12 shortcut from the keyboard. Switch to Mobile view from the opened section. You can specify the device type or width from the top edge. We can see tabbar under the dashboard screen that opens. We see the list type menu opening as a drawer with the hamburger icon. When we clicked on one of the tabbar menu, we tested the opening of the relevant screen. With a similar development process, you can quickly create menus for your mobile applications and add them to other screens with copy/paste.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try