Knack Tip: Dropdowns on Page Menus

Hey everyone, it’s Daniel from Knack here with a quick Knack tip. Today I want to talk about adding dropdown menus to your page menu.

As you build your app, you’re likely going to find new use cases or realize you need additional user roles. As your app grows, you’ll end up adding more pages. Each starting page—that is, a top-level page not connected to a parent—will automatically appear in your page menu by default.

When to Use Dropdown Menus

In our Warehouse Management App, you can see I already have several pages—some for admins and some for warehouse managers. I’m logged in as both, so I can see all of them.

Right now, I have two rows of page links. That’s manageable for now, but I’ve seen situations where the page menu extends to three or four rows. At that point, it becomes hard to navigate.

To fix that, we can group related pages under dropdown menus to keep things organized and easy to access.

Creating a Dropdown Menu in the Builder

In the Pages section of your builder, instead of adding a standard page, select Dropdown Menu. This opens a menu editor in the toolbox on the right.

Now you can choose which pages you want to include in the dropdown. Let’s start with creating one for admin pages. I’ll group:

• Products
• Inventory
• Suppliers
• Warehouses

Click Continue, name the dropdown something like Admin Inventory, and add the menu.

You’ll see the new dropdown listed in your page tree. You can also see the pages included under it.

Adding More Dropdowns

Let’s add another dropdown menu for Admin Customers. This one will include pages around customers and their orders.

Now let’s create a third dropdown for Warehouse Managers. I’ll include:

• Inventory
• Orders
• Inventory Purchases

We’ll name this dropdown Warehouse Inventory.

You’ll notice dropdown menus use a different icon than regular login or page icons in the builder. The names you assign can be updated at any time by clicking into Page Settings. If you want to change which pages are included, just select the dropdown menu in the page list, and you’ll see a checklist to add or remove pages.

Reviewing the Changes in the Live App

Let’s refresh the live app and take a look.

You’ll now see that we’ve cleaned up the page menu by grouping pages into three dropdowns:

• Admin Inventory with four pages
• Admin Customers with two pages
• Warehouse Inventory with three pages

Everything’s now easier to navigate and much more organized.

Wrap-Up

That’s just a quick way to clean up your page menu in Knack by adding dropdowns to group related pages. Thanks for joining, and happy building.