Site Navigation

Once you’ve defined the page hierarchy for your website, you need to implement an interface for users to understand and interact with it. Site navigation menus guide users to the content and functionality they are seeking. They also help users orient themselves once they're deep within your website. With well-designed navigation menus, content managers can prioritize and present critical information about the site’s organization to enhance user flow and readability. In Liferay, you should generally implement navigation menus in your master page templates' headers and footers, both for continuity and general access.

The same principles of user-centered design that apply to your overall information architecture also apply to your navigation menus. Because these menus are such a consistent and crucial presence in your digital experience, it’s important to ensure they are intuitive, legible, and visually engaging.

In this lesson, you’ll learn about best practices for designing header and footer navigation menus in Liferay.

Next to company branding, header navigation menus are typically the first thing users see on your website. They must be understandable at a glance, providing entry points to the major information flows and services that your business offers.

It’s critical to avoid overwhelming or confusing users with too many options. Display only critical links to major sections of your website, aiming for no more than five to seven at the top level. As your architecture grows in complexity, you can incorporate dropdown menus or mega menus to display more of your page hierarchy without cluttering the header.

Depending on your business needs, you may also want to include high-priority calls to action, such as

Sign Up / Log In
Buy Now
Get a Quote
Book a Demo

Identify the primary goals of your business to determine which items to include in your header navigation.

Following Familiar Patterns

Adhering to common web design patterns contributes to a predictable, comfortable user experience. For horizontal header menus, users expect a company logo on the left side that links to the homepage, along with links to user login and profile options on the right side. For vertical headers, the logo remains in the top left corner, while user account options typically move to the bottom left of the page. Unless you have a compelling reason to deviate from these conventions, sticking to familiar patterns reduces the cognitive load for your users.

Using Sticky Headers

Sticky headers remain fixed in place on the page as you scroll up or down. They help users stay oriented in your site while consuming content. Sticky headers are a mainstay in modern web design because they greatly enhance user quality of life by reducing the physical effort of navigating a site. If you employ sticky headers in your solution, it’s even more important to make sure your navigation is lean and unobtrusive while still providing vital signposts.

While header navigation guides users forward through a digital experience, footer navigation menus help users land softly, explore undiscovered parts of your site, and find essential resources they might have missed. Footers are also important for building trust in your organization’s brand and professional image.

Footer navigation is ideal for content you want to make available but not necessarily promote in your website. Footers can also duplicate navigation items from the header if you want to reinforce their importance or provide multiple paths to the same content.

There are several types of items that are appropriate for footer navigation menus, including

Site utilities that may not fit in the header, such as support, blog, FAQ, and careers pages.
Legal and compliance resources, such as your privacy policy, terms of service, cookie policy, and accessibility statements.
Contact information, such as your business address, phone number, email, and social media links.
Calls to action, such as a newsletter sign-up, contact form, and application download link.
Professional trust elements, such as security badges, awards, certifications, and partner logos.

Although footers are secondary to headers for navigation, they are still vital for framing your site content and providing a reliable experience to your users.

Liferay can automatically generate navigation menus based on your site’s public or private pages. While this is a useful way to get started, your solution will likely require more granular control over which pages appear in your menus. Using the navigation menus application in Liferay’s site-building interface, you can select the specific pages you want to display.

Once you’ve created a navigation menu, you can render it by adding a menu display fragment to your site’s master page template. Here, you can use Liferay’s design system to customize the look and feel of your navigation menus. This approach separates the items in the menu from its styling and layout, simplifying maintenance and collaboration between your content management and design teams.

Whether you are implementing navigation menus for your header or footer, consider these general best practices.

Role-Based Visibility

Use Liferay roles and permissions to control who sees specific items in navigation menus. This capability enables you to create personalized navigation interfaces for users with varying goals and credentials.

Responsive Design

Test your navigation menus across various devices and screen sizes to ensure they render correctly. For mobile devices in particular, use hamburger menus to toggle navigation visibility. Make sure navigation items are touch-friendly by adding adequate spacing between links.

Accessibility

Prioritize accessibility while maintaining your website’s visual identity and branding. Use clear fonts and high-contrast styling so that navigation items are legible against the menu background. Whenever possible, include accessibility features such as region/language selectors, keyboard navigation, and screen reader support.

Conclusion

When implemented effectively, site navigation helps lead users to relevant content and functionality. By following the principles of user-centered design, you can build efficient navigation menus that prioritize readability, content access, and user flow.

Next, you’ll apply what you’ve learned by helping Clarity implement navigation menus for their website.