Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Top Bar

The Top Bar is a top-anchored component that provides context for the screen and facilitates easy navigation through different flows. Users depend on this Top Bar to navigate and orient themselves within your UI, and this pattern highlights the qualities that make a Top Bar consistent, familiar, and user-friendly.

topbar_dummy
  • Overview
  • Specs
  • Guidelines

Pattern

The Top Bar is a vital component of a product’s user interface, providing a stable and accessible area for both product-specific and system-wide functionalities. Much like the macOS Menu Bar or the Windows Start Bar, it offers a dependable spot for local navigation and quick access to universal features like system settings, notifications, and cross-product navigation.

This pattern details the basics of using Compose components for both internal and cross-product navigation and offers strategies to maintain consistency across various products.

Top Bar anatomy
  • 1: Main menu: The primary menu icon is applied to access product navigation features, such as opening the left sidebar;
  • 2: Header name: In Cegid products, the header name always starts with Cegid and should exclusively link users to the domain’s home page;
  • 3: Search: A search function helps you quickly find specific information or items in the app or website by typing in keywords or phrases;
  • 4: Selector: Depending on the app that is used, the user can switch between different companies previously created or different subscriptions;
  • 5: Switcher: The switcher allows users to easily switch between different products and systems. It’s best used to show recently or frequently used apps, or all apps connected to the user’s account. If the list is manageable, include every app or product available on the system;
  • 6: Utilities: The header serves as a central hub for global system utilities, accessible from anywhere on the site. Instead of using utility icons for direct navigation, they should open a panel that links to different parts of the product;
Cegid Top Bar applied to all products

Used for:

Consistent navigation:

You want to provide a consistent navigation experience across all pages of your app or website.

Access to key features:

You need a space for essential features like search, notifications, user profile, or settings.

Branding:

You want to prominently display your brand’s logo or name.

Global utilities:

You need a fixed place for global utilities that users can access from any page, such as help or account management.

Don’t use for:

Context-specific actions:

The primary actions are highly context-specific and vary significantly from page to page, making a Top Bar less useful.

Simple single-page apps:

Your app or website is a simple single-page application with minimal navigation needs.

Single-purpose tools:

Tools designed for a single, focused task (e.g. calculators, timers) typically don’t benefit from a Top Bar since navigation is minimal or non-existent.

topbar_usage_dont2
Top Bar with context specific actions

Demo

Access the Figma file and inspect the element using Dev Mode.

Topbar pattern in figma
Open Figma

Related

Side Bar

The Sidebar is the side section containing navigation menus between applications or product pages …
Read More

Search

A Search component enhances user experience by enabling quick, intuitive, and refined information retrieval …
Read More

Usage

The Top Bar in a product is crucial for enhancing user experience by providing essential navigation, branding, search functionality, and user account access. It offers quick and easy access to key features and information, ensuring users can efficiently navigate through the app. Additionally, the Top Bar often includes notifications, settings, and help options, centralizing important utilities and tools in one accessible location. By consistently being available at the top of the screen, it helps users stay oriented and find what they need without unnecessary clicks or searching.

Top Bar with different icons
Don’t

Change the icons used in the Top Bar.

topbar_usage_dont2
Top Bar with page specific actions
Don’t

Use the Top Bar for page-specific functions.

Top Bar with organized icons
Caution

When incorporating additional actions in the Top Bar, ensure it remains organized and uncluttered.

Behavior

Sticky header:

  • In mouse-driven interfaces, changing the cursor shape can signify drag-and-drop capability. When users hover over a draggable object, the cursor shifts to indicate that clicking will start the dragging process;

Search functionality:

  • Allows users to quickly search in the product and provides suggestions as the user types;

Global utilities:

  • Provide quick access to system or product settings for users to easily access help documentation or customer support;

Responsive design:

  • Adjusts elements’ layout and visibility based on screen size (desktop, tablet, mobile);
Top Bar responsive behavior

Related

Importance of Non-Productive Environments on Products

Understand how non-productive environments influence product development, fostering creativity, innovation, and improved problem-solving …
Read More

Spacing

Structure

topbar_spacing
Top Bar overall struture spacings

Apps menu

Top Bar apps spacing

User profile

User profile menu paddings

States

The items in the Top Bar can have different states: enabled (1), hover (2), pressed (3), focus (4), and disabled (5). For information on the search and selectbox states, please refer to their individual documentation pages.

Icons

Topbar icons states
Enabled
Icon enabled state colors
.enable{
color: var(--Greys-Grey-7);
}
Hover
Icon hover state colors
.hover{
color: var(--Greys-Grey-8);
border-radius: var(--Border-Radius-rounded);
background: var(--Theme-Theme-10);
}
Pressed
Icon pressed state colors
.pressed{
color: var(--Greys-Grey-8);
border-radius: var(--Border-Radius-rounded);
background: var(--Theme-Theme-20);
}
Focus
Icon focus state colors
.focus{
color: var(--Greys-Grey-8);
border-radius: var(--Border-Radius-rounded);
border: 1px solid var(--Greys-Grey-8);
background: var(--Theme-Theme-20);
}
Disabled
Icon disabled state colors
.disable{
color: var(--Greys-Grey-5);
}

App menu

App menu items states
Enabled
App menu items enabled state colors
.enable{
background: var(--Greys-Grey-1);
title: var(--Greys-Grey-8);
subtitle: var(--Greys-Grey-7);
}
Hover
topbar_userProfile_states_hover
Top bar hover state
.hover{
background: var(--Greys-Grey-2);
title: var(--Greys-Grey-8);
subtitle: var(--Greys-Grey-7);
}
Pressed
App Menu items enable state colors
.pressed{
color: var(--Theme-Theme-10);
title: var(--Greys-Grey-8);
subtitle: var(--Greys-Grey-7);
}
Focus
App menu items focus state colors
.focus{
border-radius: var(--Border-Radius-x-small-radius);
border: 1px solid var(--Greys-Grey-8);
background: var(--Greys-Grey-1);
title: var(--Greys-Grey-8);
subtitle: var(--Greys-Grey-7);
}
Disabled
topbar_userProfile_states_disable
Top Bar disabled state
.disable{
background: var(--Greys-Grey-2);
title: var(--Greys-Grey-6);
subtitle: var(--Greys-Grey-6);
}

User Profile

For information on the used buttons states, please refer to their individual documentation pages.

User profiile options states
Enabled
User profile options enabled state colors
.enable{
background: var(--Greys-Grey-1);
icon: var(--Greys-Grey-7);
title: var(--Greys-Grey-8);
}
Hover
User profile options hover state colors
.hover{
background: var(--Greys-Grey-2);
icon: var(--Greys-Grey-7);
title: var(--Greys-Grey-8);
}
Pressed
User profile options pressed state colors
.pressed{
background: var(--Theme-Theme-10);
icon: var(--Greys-Grey-7);
title: var(--Greys-Grey-8);
}
Focus
User profile options focus state colors
.focus{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-8);
background: var(--Greys-Grey-1);
icon: var(--Greys-Grey-7);
title: var(--Greys-Grey-8);
}
Disabled
User profile options disabled state colors
.disable{
background: var(--Greys-Grey-2);
color: var(--Greys-Grey-6);
icon: var(--Greys-Grey-7);
title: var(--Greys-Grey-6);
}

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component
polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Outline