Master / detail

The master / detail pattern has a master pane that gives you the ability to navigate and filter content. Use this pattern for user flows that require dashboards ,list, aggregated views with ability to show related content.

Grid layoutlink

The left master pane is used for navigation and to filter the main content. Related contextual content and detais are displayed in the right pane.

Space between components in the main content is 24px.

Layout exampleslink

You can vary the width and orientation of the navigation pane and main content to better fit the type of data you want to display. You can add a header displaying overview metrics and on demand related information showing on a side panel.

Master / detail use caseslink

You can use a master / detail pattern when selecting a list item, you want to display contextual data or details. For example:

  • View my accounts and display transaction details for selected account
  • Display list of customers and show customer details when selecting a customer
  • Choose a portfolio/book/currency to filter the main content of the page

📊 Display metrics (count, percentage, amount) on each list item to drive the motivation of click and help users decide what to do next. For example, showing the accounts' balance can help choose the account details to view next.

  1. Accounts application with header navigation

    To learn how to build a financial application, take a look at our app templates.