{"componentChunkName":"component---src-pages-components-overflow-menu-usage-mdx","path":"/components/overflow-menu/usage/","webpackCompilationHash":"858cd91bffcad76c0e29","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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"]},"relativePagePath":"/components/overflow-menu/usage.mdx","titleType":"prepend","MdxNode":{"id":"8f005177-2e23-5fdf-b204-bec7e7be8142","children":[],"parent":"6aa4fc5a-ba64-535b-9331-aedaa4088c92","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']\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":"2787c03e7e7d93e8bf2186058a598799","counter":1211,"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"]},"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']\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":"/tmp/753a091b/src/pages/components/overflow-menu/usage.mdx"}}}}