Grommet follows a mobile-first design approach for its main navigation. To respond down to smaller device sizes, our header consists of only the essential elements of an application. We’ve instituded a Hub & Spoke design aesthetic to keep the elements minimal and promote a contextual navigation experience.

Hub & Spoke is useful for multiple, distinct linear workflows. Building task based experiences stemming from a common start point helps ensure the items within an app correlate for a cohesive experience.

The Header is designed to be easily accessible while supporting the main content of your application.

navigation header

When designing your application, the header should only provide the essential elements of the navigation. The header composition is formed by a combination of theApplication Icon, Application Name, and when available, the User Functional Icon, and/or Search Field Icon.

If your application requires the exposure of other navigational elements or unique application functions, those should be reserved for the main navigation’s sidebar.

Header Component

The Sidebar. When designing yourapplication'smain navigation, your sidebar is your friend. All key application areas should be accessible through your sidebar.

navigation sidebar

As opposed to using the Application Icon as a link to the application main page, Grommet uses the icon as a mechanism to toggle the sidebar for access to all areas of the application.

The sidebar should be accessible at all times. For more simple applications, the sidebar might not even be needed.

Sidebar Component

Action Dropdown Menu. In some cases, the application menu items will necessitate a need for secondary actions. When these cases are presented, the dropdown component can be used in conjunction with a functional icon.

navigation action dropdown menu

It’s important to maintain a short list of actions that are relevant to the function of the icon. The dropdown menu component only supports a single level of structure. If you are trying to expose more granular actions within a menu or sub-sections, these actions should be moved outside of the dropdown menu or into a separate display mechanism in your application.

In responsive views, it’s important to note that the dropdown menu does not occupy the entire screen.

Menu Component

Responsive Behavior. Much like all components in Grommet, the navigation automagically responds to display as much context as possible for users at different browser sizes and devices.

navigation responsive behavior

A great example of this behavior is how Grommet will display the sidebar when there is enough space horizontally in the view, but will collapse it for mobile experiences.

These types of behaviors are built into each component so designers and developers alike can focus on their content and the experience, rather than the styling and structure of the componentry.

Design Resources