TOP NAV BAR
Top navigation bar display key information about the current page, along with essential actions and navigation options such as Back or Menu.
TYPES
This component adapts across the app with variants for different use cases — a title with subtitle for detailed context, a simple title for straightforward pages, and a search-enabled header for quick access to information, ensuring clear and contextual user interactions.
WHEN TO USE
Use a top nav bar
Use a top navigation bar to display content and actions related to the current page, such as navigation controls, titles, images, and one or two key actions.
The information and actions in the top navigation bar should be contextual and specific to the page but can also include global controls like search or notifications.
EXAMPLE
Examples of the top nav bar component used across different features in MediBuddy.
Heading
Search bar
CONTENT
Heading
The text should:
—
Use sentence cases for titles and keep them as concise as possible.
—
The header copy is meant to be a short, succinct title that does not extend beyond one line. Titles that extend beyond one line will be truncated.
—
Avoid using a full stop
AVAILABILITY