Utility Bar (Top Bar)

The narrow, upper strip that contains secondary information like contact details, login links, promotions, or utility functions.

A second bar (utility bar) is useful for sites with important information that needs quick access, like e-commerce or content-heavy websites. Here’s when to use or avoid it, and what to include:

When to Use:

• E-commerce Sites: Great for displaying promotions, free shipping offers, or return policies.
• Contact Information: Perfect for phone numbers, emails, or live chat links, especially for service businesses.
• Utility Links: Useful for login, cart, language, or currency options, particularly in e-commerce.
• Notifications: Ideal for urgent messages or site-wide updates.

When Not to Use:

• Minimalist Designs: May add unnecessary clutter to simple layouts.
• Low Content Needs: If no secondary navigation is required, the bar may distract from the main menu.
• Mobile View: If it clutters the mobile version or requires too much scrolling, it’s better to avoid.

Design

It’s common for the utility bar to be roughly half the height of the main navigation bar, but this is not a strict rule. The key is maintaining a balanced visual hierarchy where the utility bar is clearly secondary to the main navigation.

General Guideline:

• If your main navigation bar is around 50-70 pixels, a utility bar of 20-40 pixels works well, ensuring it remains subtle but functional.
• The exact ratio can vary depending on the content in each section, but keeping the utility bar smaller helps it feel unobtrusive and visually distinct.

Keep It Minimal: The utility bar should contain only the most essential information or links (e.g., promotions, contact info, account login). Avoid overcrowding it with too much content to maintain a clean, user-friendly design.

Maintain Visual Hierarchy: Position the utility bar above the main header, keeping it visually distinct but subtle. Use smaller icons or text to indicate that the information is secondary to the primary navigation.

Avoid Distractions: Don’t use flashing elements or overly bright colors in the utility bar, as they can distract users from the main content or navigation.