List-Detail
Material Design 3 Standard Component
Refer to the Material 3 List-Detail guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics. Technical reference:
In the Adaptive Layouts Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Tonal Horizon theme to craft your own designs.
Intro
The list-detail layout is a canonical layout type used to display parent-child information pairs. It structures content in a two-pane layout, allowing users to compare and switch between multiple items, and to perform tasks or actions on a selected item. This streamlines the organization and presentation of hierarchical information, improving visibility and accessibility of complex data structures and helping users understand content intuitively.
List-detail layout displayed in different window sizes
Usage
Do
Use a list-detail layout when all list items are hierarchical and share a homogenous data structure, for example, for a list of expenses in a list report or an inbox with workflows.
Don't
Don’t use a list-detail layout for simple content or when a flat, single-page view is more suitable. Use adaptive layouts such as a supporting pane and feed instead.
- Each list item in a list-detail layout should include additional meta information, such as dates, categories, or tags, to allow users to search and sort quickly.
- Each pane in a list-detail layout should include a top app bar to ensure actions are linked directly to specific areas, enhancing user understanding and maintaining a smooth experience.
Anatomy
A list-detail scaffold supports the following pane types:
A. List Pane
The list pane displays a collection of items.
It should maintain a fixed width and display a list or collection of items in a browsable format. Each item follows the same information structure and provides a summary of key attributes.
B. Detail Pane
The detail pane shows the details of a selected list item.
It should be flexible and responsive, allowing it to adapt to different window size classes and to dominate the screen space while being in focus.
C. Extra Pane (Optional)
The extra pane can provide additional information by extending the detail pane.
It is best to set a minimum and/or maximum width or flexible width that adjusts based on the content.
---
Behavior and Interaction
By default, in the initial state of a list-detail layout, no list item is selected. However, we recommend selecting the first item in the list and displaying its details. For the default behavior, consider displaying an empty state illustrated message in the detail pane.
Navigation
When users select an item from the list, its item details are displayed and should ideally be highlighted or feature a visual indication to emphasize the selection.
On an expanded window, a visual indicator is essential to show the relation between the list item and the related details. The same rules apply when an item is tapped in the detail pane and the extra pane is exposed.
On compact and medium windows, the panes follow a stacked flow, where each pane is displayed sequentially. Avoid deep navigation to maintain screen-to-screen connection for an improved user experience.
For complex business use cases that require a deep navigation flow, the list-detail layout provides different navigation options. However, it is advisable to manage deep navigation carefully and consider user testing, as the current scaffold has limited options.
Navigating from a List-Detail View to a List-Detail View
Users can navigate from a list-detail view to another list-detail view. To return to the previous view, they can use the “Back” icon button.
Navigating from a List-Detail View to a Detail View
Users can navigate from a list-detail view to a detail view, and again to further detail views. To return to the previous view, they can use the “Back” icon button. If only one detail pane is displayed, we recommend adding left and right padding or using a dual-column layout within the pane to prevent the content from stretching.
Search
The search function in a list-detail layout should be integrated into the top app bar of the pane to help users find the entry point for their search queries.
The responsive behavior of the search view adapts to different window size classes. In compact window sizes, the search view is a full-screen modal, while in medium and expanded window sizes, it is displayed in a modal connected to the search bar. It’s important to ensure the position and orientation of the search are scaled.
Opening the search in a modal within a list pane in an expanded window size and in full-screen in a compact window size
Create
In expanded window sizes, a create flow in a list-detail layout should be adaptive. Instead of using a dialog, we recommend creating a new list item within the list-detail layout. The new list item appears on top of the list, allowing you to add information related to the list item in the detail pane.
Depending on the use case, you could also use a dialog or full-screen modal to enhance focus by separating the task from the information hierarchy. For example, a modal view can be used to display the creation of a new itinerary.
Adaptive Design
The Android operating system provides a list-detail scaffold that makes the layout automatically adapt to different window size classes, ensuring proper pane positioning.
On expanded and large window sizes the list and detail panes appear side by side. If an extra pane is opened, the list pane slides out of the view to the left, allowing the detail pane and extra pane to be shown next to each other.
In compact and medium window sizes, only one pane is visible at a time. When users navigate through the panes, the view changes to a stacked navigation pattern.
Resources
Development:
SAP Fiori for iOS:
Material Design: List-Detail Layout
Related Components/Patterns: Canonical Layouts, Create, Search