From 559740178a07fee7c4a73a76d19d360eb8d3e7ad Mon Sep 17 00:00:00 2001 From: Rob McCarthy Date: Thu, 17 Oct 2024 13:42:51 +0100 Subject: [PATCH] docs(identity bar component updates): updates to the identity bar component based on the button menu --- docs/components/identity-bar.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/components/identity-bar.md b/docs/components/identity-bar.md index f3eb79e8c..763a8f221 100644 --- a/docs/components/identity-bar.md +++ b/docs/components/identity-bar.md @@ -17,22 +17,28 @@ This component is helpful when an entity consists of additional [sub sections](. Don't use this component if there's only one details page. For example, clicking a case in a case list and seeing a single page of information about the case. +### Similar or linked components + +There's also the: +- [button menu component](../button-menu/) +- [page header actions component](../page-header-actions/) + ## How to use -### Action menu +### Displaying tasks -You can optionally configure the component to display actions that the user can take from within any sub section. +You can use buttons to display tasks which relate to the identity bar. {% example "/examples/identity-bar-menu", 150 %} -### Drop down action menu +### Displaying a menu of tasks -The action menu uses the [menu](../button-menu) component which can be configured to show as a drop down menu. +You can use the [button menu](../button-menu/) to display tasks which relate to the identity bar. {% example "/examples/identity-bar-menu-toggle", 300 %} -### Primary button plus secondary action menu +### Displaying primary and secondary tasks -This [menu](../button-menu) is made up of multiple menus. The first consists of just one button and is exposed because it's a primary action. The second menu consists of two secondary options, which are placed within a drop down menu. +You can use the [button menu](../button-menu/) alongside a [GOV.UK button](https://design-system.service.gov.uk/components/button/) (or link) to show tasks of differing importance which relate to the identity bar. This code has correct spacing and creates a better user experience for people on mobile devices. {% example "/examples/identity-bar-secondary-toggle", 300 %}