{"componentChunkName":"component---src-pages-components-overflow-menu-usage-mdx","path":"/components/overflow-menu/usage/","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":"77af4f89-0c1e-5bc7-afc1-6d4454eed9cd","children":[],"parent":"cb18ac47-0165-5153-8e38-f7affa415ce3","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":"78e1ad142d1a2eab35a0902b0d80d052","counter":1472,"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":"/zeit/4ebe1d4/src/pages/components/overflow-menu/usage.mdx"}}}}