Setting Up Avellin Navigation and Dropdown Menus

Build Avellin’s main menu with Blogger Pages and create multi-level dropdowns using the built-in hyphen hierarchy.

Avellin turns Blogger’s flat Pages gadget into a multi-level menu. You build the hierarchy by prefixing page names with hyphens.

The hierarchy format

Recipes = top-level item
- Breakfast = child of Recipes
-- Pancakes = child of Breakfast

The hyphens are removed from the public menu automatically.

Example

Recipes
- Breakfast
- Lunch
- Dinner
- Baking
- Desserts
Vegetarian
About
Contact

How to edit the navigation

Go to Layout.
Open Main Navigation.
Add or reorder links.
Use one hyphen per nesting level.
Save and test the menu on desktop and mobile.

Linking recipe categories

A category link normally points to a Blogger label URL such as /search/label/Breakfast?max-results=6. The label name in the URL must match the Blogger label used on posts.

Mobile navigation

Below the desktop breakpoint, Avellin switches to a mobile menu. Dropdowns are expanded with their own toggle buttons, so test nested items on a phone as well as with a mouse.