{"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":"801ff668-2dca-5d65-bb10-395a790edc35","children":[],"parent":"fdb6d226-01ad-52ba-bdf6-ff74b59686cf","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":"6ceff8d00c90c2975e8040da77b2e7cd","counter":1376,"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/3eb073a4/src/pages/components/overflow-menu/usage.mdx"}}}}