Your user’s ability to navigate your website is crucial to the overall success of your online business, and what better way to display navigation through a standard website menu?
While it’s true that you don’t have to have a menu on your website– or even have multiple pages– the classic website features a home page, 2-4 “top-level” pages, and other secondary, supporting pages.
Before we get into the visual design of these classic menu layouts for your website, let’s review a few key things about websites and website navigation.
Examples of Top-Level Pages
- Home
- About
- Contact
- Shop: such as products, services, etc
- Blog (optional)
- Testimonials/Press/Media
Examples of Secondary Pages
- Login or Portals
- Legal pages: Terms and Conditions, Privacy Policy, Disclaimer
- 404 Page
- Basic content pages, such as a media player
Why Does My Website Need Navigation?
If you’re trying to decide between a classic website layout, or something a bit edgier that prioritizes aesthetic, you have a big decision about how to design your website menu. Linking all of your pages together in a seamless manner is a big signal to the internet search engines– particularly Google– that helps them to crawl and index your site quickly. And when you make things easy for Google, they reward you.
Here are a few fast facts about website navigation to help you decide:
Displaying a classic menu on the top of your page will allow your users to navigate your website easily.
When they know what they want to view, they can quickly find it in the same place a menu always is, and get where they want to go. This helps communicate that you’re efficient, understand their needs, and are reliable.
Designing a pop-out or otherwise atypical menu style will show-off your brand and easily demonstrate that to your user
Choosing a menu like this allows you more design freedom, and with design freedom, comes a solid branding opportunity. This can really elevate your brand and showcase your out-of-the-box thinking. And remember, just because you haven’t chosen a classic style, doesn’t mean you can’t also communicate the values mentioned above (efficiency, readability, reliability).
Website navigation via menus is critical if you have multiple pages.
For those who have chosen a one-page website style, you won’t necessarily need a menu. Whether you should have multiple pages or one-page website is a topic for another blog post, check back soon!
Classic Website Navigation Menu Styles
If you decide to build a website with a classic website menu, here are some examples that you have to choose from. Remember, there’s still a lot of opportunity to spruce these up if you want to prioritize user experience AND truly represent your brand.
1. Logo on the left or in the middle
This is probably the most common menu design– and for good reason! This classic style features the brand logo on the top left, and allows for a seamless straight-across view of all top-level pages on the website. It emphasises the call to action with a bright button. If you really want your leads to take a certain action, use a menu style like this or the one below.
Similar to the first example, choosing to put your logo in the middle sends a solid “this is us” impression, while still offering the user the ability to immediately navigate themselves through your website.
What both of these menu examples have in common is the way that they are likely to stack in mobile view. You must consider both the desktop layout and mobile layout equally when designing a website. Both of these examples would stack on mobile with the logo featured on the top, and a list of pages below, ending with the button.
Something to consider when reviewing these examples are that you still can make them a bit unique– the first example features 2 call-to-action buttons. Other menu’s might have cool, dynamic features which change the links and button colours when the mouse hovers over. Adding your fonts, brand colours, logo, and simple graphic design or icons is another way to show off your brand while maintaining a classic look.
2. Featuring social media in your menu
Here is a great example of a classic website menu featuring social media icons. This example differs from the others because it features multiple rows, which allow for more content on the menu. The menu is also much larger and will take up much more space on the screen.
You will also need to consider how you want it to stack on mobile. It might not stack automatically the way you’d want for it to, which creates the need in many website platforms to add coding to alter the way it stacks in mobile view.
(Don’t want to bother with coding? Use a website builder like ShowIt to style your desktop and mobile designs separately for ultimate flexibility).
3. Logo and navigation links are centred
If you don’t want to feature any specific buttons, and prefer a clean and elegant design, this could be the menu for you! It features the logo at the top centre of the page. Free of distractions, the menu directly below the logo allows the user to immediately navigate to their page of choice, or continue down the screen without interruption.
Choosing a menu is important to your website, so don’t overlook it! But it’s also important to remember the opposite, and that overthinking something like your menu is probably not the best use of your time. You can make larger impacts in other areas of your website and client journey, so keep a classic website menu design in mind!
If you need help building a website for your bold and brave business, then please contact me about your project. Two Paths Co. is also building a template shop for your ShowIt and/or Kartra web design needs!
Pin it so you can find it again later! 👇🏼
his blog post contains affiliate/referral links. Clicking the links will not incur any extra charge to you. You will get a better deal, and I get a tiny kickback to keep this blog going!
