Navigation

Overview

The Navigation or header is a critical component for guiding users through our website and dashboard products. It ensures users can easily find and access different sections and features. This documentation covers the anatomy, variations, and accessibility considerations for both mobile and desktop navigation designs.

Anatomy

Dashboard Header

1. Page Title: Displays the current page you are on.
2. Search: Enables you to search the entire dashboard.
3. Alert and Notification Buttons: A red dot appears over these buttons when you have an alert or notification. Clicking on these will bring up the respective panels for each.
4. User Info: Displays the users profile picture as well as their name.

Dashboard Navigation

1. Logo: The IPAC Dashboard Logo.
2. Client name: Once a client is logged in, their business name will show here.
3. Collapse Button: Collapses the desktop navigation into a more compact form.
4. Heading: A heading to categorize the links below it.
5. Active Link: Highlights the current page you are on.
6. Link: A navigation link.
7. Icon: An icon that is paired with the navigation link text.
8. Upgrade Callout: A callout to prompt users to upgrade their plan.
9. Buttons: Chat and Logout buttons.

Anatomy

Website Header

1. Logo: The IPAC Consulting logo.
2. Top Navigation: A smaller navigation highlighting our phone number, email and account info.
3. Account info: The logged in users name, along with how many items are in their bag.
4. Navigation Links: Links to our websites pages.
5. Navigation Buttons: Buttons to highlight the more important pages of our website.
6. Search Button: Clicking this will bring up a site search.

Variations

Dashboard

Compact Navigation

Usage: After clicking the collapse button, this more compact state will show.

View Code

Bitbucket Repo

Dashboard

Mobile Header

Usage: The mobile version of the dashboard header.

View Code

Bitbucket Repo

Dashboard

Mobile Navigation

Usage: The mobile version of the dashboard navigation.

View Code

Bitbucket Repo

Variations

Website

Mobile Header

Info: The mobile version of the website header.

View Code

Bitbucket Repo

Website

Mobile Navigation

Info: On the mobile header, clicking the hamburger button will toggle this navigation.

View Code

Bitbucket Repo

Accessibility

• Ensure all navigation elements are keyboard accessible.
• Provide ARIA roles and properties for navigation landmarks.
• Ensure sufficient color contrast for text and icons.
• Use descriptive labels for icons and buttons.
• Implement skip navigation links for screen readers.
• Ensure responsive design for seamless navigation on different devices.