Anatomy
- Ribbon expand/collapse control: Opens and closes the ribbon container
- Ribbon container: Holds compatible ribbon widgets (such as SLA timeline data, profile information for a caller, and other audit trail information linked to a record)
Usage
The ribbon component provides a location where one or more custom widgets can be displayed on a page.
Variants
Learn about the variants of ribbon.
Sizes
The ribbon component doesn't have any specific sizes. However, it has a fixed full-page width. The ribbon container can hold widgets up to a maximum of 12 columns within the container.
Configurations
Learn how to customize the ribbon component by configuring the available properties.
Presets and controllers
This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.
A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.
Show/hide component
The ribbon defaults to open at run time, unless the collapsed flag is set. The ribbon can also be configured not to show, as needed.
Any widgets shown in the ribbon must already be pre-configured.
In this example, the ribbon is expanded.
Design recommendations
Learn how to apply the ribbon component in your design.
Make sure you place the ribbon at the top of a record.
Don't place the ribbon in a location too small to hold its full width.
UI text guidelines
These are some recommendations for using text within the ribbon component.
- Use sentence case for all titles, labels, and column headers
- Keep all text labels informative and short to increase readability and scanning
- Keep content concise and purposeful to help a user understand options and actions
- Capitalize only the first letter and any proper nouns in a string of text
- Ensure content is contextual and specific to offer guidance and support to the user
Behavior
Learn how ribbon behaves when the display changes or a user interacts with the component
Responsive behaviors
The ribbon component uses the full width of a record and does not resize.
Interactions
The ribbon component has an expand/collapse interaction that opens and closes the widget to support maximizing the viewable content.
Usability
The ribbon component complies with all internationalization and accessibility requirements.
Internationalization
When the display translates to a right-to-left (RTL) language, the elements in the ribbon component maintain their hierarchy and are ordered from right-to-left.
Accessibility
Learn how to access the actionable elements of the ribbon component through keyboard interactions and screen readers.
Keyboard interactions
You can access the ribbon component with these keyboard keys:
- Tab
- Shift + Tab
You can open and close the ribbon component with these keyboard keys:
- Spacebar
- Enter
Screen readers
When you apply ARIA labels to a component, screen readers announce the controls and content of the ribbon component in the prescribed tab order.
The ribbon component has 2 states:
- Aria-expanded=true
- Aria-expanded=false