{"componentChunkName":"component---src-pages-components-overflow-menu-usage-mdx","path":"/components/overflow-menu/usage/","result":{"pageContext":{"frontmatter":{"title":"Overflow menu","description":"Overflow menus are used when additional options are available to the user and there is a space constraint.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/overflow-menu/usage.mdx","titleType":"prepend","MdxNode":{"id":"8a21f08d-d2fe-5ed0-81f0-2ae80fb00ea3","children":[],"parent":"aaed349f-88b6-560a-b2e0-18632c8ca4ef","internal":{"content":"---\ntitle: Overflow menu\ndescription: Overflow menus are used when additional options are available to the user and there is a space constraint.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n## General guidance\n\n_Overflow menu_ is used when additional options are available to the user and there is a space constraint.\n\n## Format\n\n#### Text\n\nThe text within an overflow menu should be direct so users can quickly decide on an action. Actions that could cause a significant change to the user's data (delete app, delete service, etc.) are separated by a horizontal rule and live below the primary set of actions.\n\n<Row>\n<Column colLg={8}>\n\n![An overflow menu with a significant action](images/overflow-menu-usage-1.png)\n\n![An overflow menu with a significant action](images/overflow-menu-usage-1.png)\n\n</Column>\n</Row>\n\n#### Positioning\n\nDepending on where the Overflow Menu appears within the UI, the caret or arrow may be left or right aligned so the Overflow Menu is clearly visible.\n\n<Row>\n<Column colLg={8}>\n\n![Overflow menu right aligned](images/overflow-menu-usage-2.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![overflow menu left aligned](images/overflow-menu-usage-3.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"b2087937f30ef3be8e088dd97dec7212","counter":1524,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Overflow menu","description":"Overflow menus are used when additional options are available to the user and there is a space constraint.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Overflow menu\ndescription: Overflow menus are used when additional options are available to the user and there is a space constraint.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n## General guidance\n\n_Overflow menu_ is used when additional options are available to the user and there is a space constraint.\n\n## Format\n\n#### Text\n\nThe text within an overflow menu should be direct so users can quickly decide on an action. Actions that could cause a significant change to the user's data (delete app, delete service, etc.) are separated by a horizontal rule and live below the primary set of actions.\n\n<Row>\n<Column colLg={8}>\n\n![An overflow menu with a significant action](images/overflow-menu-usage-1.png)\n\n![An overflow menu with a significant action](images/overflow-menu-usage-1.png)\n\n</Column>\n</Row>\n\n#### Positioning\n\nDepending on where the Overflow Menu appears within the UI, the caret or arrow may be left or right aligned so the Overflow Menu is clearly visible.\n\n<Row>\n<Column colLg={8}>\n\n![Overflow menu right aligned](images/overflow-menu-usage-2.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![overflow menu left aligned](images/overflow-menu-usage-3.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/overflow-menu/usage.mdx"}}}}