Competitive analysis: Navigation menus

Overall requirements

  • create links to: home, archive pages, single CPTs and archives, posts, pages, social media, external links, shop … (maybe just a search?)

Medium

[file:CEEAC7DB-EB6A-4D5F-AAB8-779C23103080-6626-00027BBC7E41618C/Medium-navigation-menus.mov]

Medium’s menu building experience is rather simple, but a bit limited in scope.

[image:4698E3AC-0078-4440-81D8-650A232E5D81-6626-00027B2A0672643B/Screenshot 2019-01-29 12.26.13.png]

Vocabulary: Each link is called a “tab” within the “navigation”.
Reordering:: Tabs can be dragged and dropped.

Clicking the “+” button creates a new tab instance: [image:DD635B3B-F41A-4EA2-B3DC-75D4ABF58084-6626-00027B4C9BF4C490/Screenshot 2019-01-29 12.26.20.png] You start by entering a name for the tab.

Different tab “types” are used to link to different types of content: [image:AC58CF73-8EFE-4BCA-AFCD-F58EB957A36A-6626-00027B450FE8F272/Screenshot 2019-01-29 12.26.47.png] The third Contents field is used for additional options, depending on the tab type selected. Not all types have a contents field.

This often uses a search paradigm to make it easier to find the right content quickly: [image:D7AC7D49-A953-46E4-A8FA-1CBF8F9B3B71-6626-00027B6805BFA742/Screenshot 2019-01-29 12.26.55.png]

Adding an external site is a totally separate process:

[image:9C1BDCD9-553A-4375-B058-2C0EA2C6A155-6626-00027B1BEA0C82BD/Screenshot 2019-01-29 12.27.01.png] Only a single external link can be added, and it can only be added at the end of the navigation.

Beaver Builder

[file:B0050D60-E1AA-46BA-96D5-43DF416579B5-6626-00027E3B7ABAFEF5/Beaver-Builder-navigation-menus.mov]

Setting up a menu requires an additional plugin: “Beaver Builder Header Footer”. It also requires theme support, which comes in their proprietary theme and also many Genesis framework themes.

You can’t add a menu directly using Beaver Builder’s interface. First you need to create a regular WordPress menu, then you can add the menu to a Beaver Builder layout. (This took me a little time to figure out!)

[image:F69465E2-7573-458A-9DBE-8358C5D58CCB-6626-00027E710868D186/Screenshot 2019-01-29 13.28.58.png]

Menus have an extensive array of options and settings: [image:A6D28C02-3333-4715-BBE8-3ADEB7DE3528-6626-00027E41AF782ADC/Screenshot 2019-01-29 13.24.55.png] [image:B5D11007-63E4-4783-AD18-BCA772289A71-6626-00027E41B06A58B7/Screenshot 2019-01-29 13.25.02.png] [image:AFF3E4F5-CB98-4978-9E2F-2ECD1A80AE0B-6626-00027E41B09818EB/Screenshot 2019-01-29 13.25.08.png] All settings relate to the display of the menu itself. Menu-building happens via the standard WordPress interface.

Vocabulary: The module is called a “menu”. Reordering:: n/a Layout options:: Horizontal, vertical, accordion, expanded

Divi

[file:873FB75D-0EE9-438A-8E99-2CBAA923B995-6626-00027F971574D717/Divi-NavigationMenus.mov]

Like Beaver Builder, Divi’s menu module relies on using existing menus in WordPress. A good test-drive can be seen here: The Divi Fullwidth Menu Module | Elegant Themes Documentation

It can only be added in a section that’s full-width.

[image:492EDC67-60E9-43B9-900A-38F38C8E1D1D-6626-00027F7D95CB1A35/Screenshot 2019-01-29 13.48.14.png]

Like Beaver Builder, there are lots of options: [image:0171957C-9FFC-4DF7-8ACE-AC802F2E2DC0-6626-00027F863738260D/Screenshot 2019-01-29 13.47.53.png] [image:C0FCB7FA-BB77-43BA-B3A6-18863182308F-6626-00027F8637674FDD/Screenshot 2019-01-29 13.48.07.png]

Vocabulary: The module is called a “Fullwidth Menu”. Reordering:: n/a Layout options:: “Sub-menus open… upwards|downwards” and an option for “Make menu links full-width”

Visual Composer

Visual Composer has its own menu paradigm.

There are lots of different options, all of which are presented as different elements entirely (so you can swap between types).

Google Sites

Google Sites builds a menu based on your page structure. To add items to the menu, you add a new page. This feels very natural and very in line with how many people think of their website.

Report abuse