Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • General: Service navigation
    • Top navigation
    1. Cloudscape Design System
    2. Patterns
    3. General: Service navigation
    4. Top navigation

    Top navigation

    Top navigation provides global controls that help users use the product or service. It’s comprised of a collection of global functionalities that are separate from the product's structural navigation.

    Published: May 19, 2022
    View demo

    On this page

    1. Key UX concepts
    2. Building blocks
    3. Responsive behavior
    4. General guidelines
    5. Related patterns

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Key UX concepts

    The top navigation should be organized to support the user’s global navigation requirements. It can be used on its own or paired with the side navigation component.

    It provides three distinct locations to house your global functionality:

    1. The service identity

    2. An area for global search

    3. On the far right of the top navigation, an area to house utility navigation (for example, notifications)

    Building blocks

    A.
    Service identity

    The service identity is always the first item in the navigation.

    B.
    Global search - optional

    Use a search input or autosuggest component to provide the global search for the service. Use the autosuggest component when you can provide search suggestions for quick access to relevant result.

    For example: Searching for service resources.

    C.
    Utility navigation - optional

    Utility navigation is a collection of controls that are separate to the services structural navigation. These are positioned in the right of the top navigation, ensuring they are always visible and easily accessed.

    For example: Notifications, service settings, user profile management, and sign out.

    D.
    Service specific controls - optional

    Include controls that need to be always visible to your users first in the list.

    For example: Link to aws.amazon.com .

    E.
    Notifications - optional

    Provides access to global notifications. Add a badge to indicate a state change that a user should read or acknowledge within the service.

    For example: Indicating that a new commit has been made to a project.

    F.
    Service Settings - optional

    Use an icon button with a settings icon to access global service settings.

    For example: Settings where users can configure global properties for how the service functions.

    G.
    User profile management - optional

    Use a link button with the user profile icon supported with the user name or id to link to the user and or account management options.

    Use the following order for nested links. Profile, User profile Preferences and Sign out as the last item in the list.

    Add other links the service may require in order of usage after Preferences and before Sign out.

    H.
    Support - optional

    Group your support links together. These can be placed either as the first item in the utility navigation, or grouped as a category under profile. Base your grouping on your user data.

    For example: Service documentation and feedback.

    Responsive behavior

    The top navigation component comes with integrated responsive behavior. To see a real-life example, view the demo and resize the screen to see the responsive behavior.

    More information on the responsive behavior can be found in the top navigation usage guidelines.

    General guidelines

    Do

    • The order of items in the utility navigation should follow a consistent order: Notifications, Settings, User management. When you add product or service specific links, place them first in the list.
    • Use the customers name, email, or id, as title for the user profile menu.

    Don't

    • Don’t persist all of your services controls on smaller screen sizes. Don't prevent too many controls from being moved into the overflow menu.
    • Don't add structural navigation links in the top navigation. Instead, use the side navigation.
    • Don’t move notifications into the overflow menu. Ensure the notification icon persists on all screen sizes.

    Related patterns

    Top navigation

    A global navigation element for services that is consistent and persists across all service pages.

    Button

    Allows users to initiate actions in the user interface.

    Autosuggest

    Autosuggest enables users to choose from a list of suggestions.

    Side navigation

    A list of navigational links that point to the pages within an application.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS