{"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"]},"relativePagePath":"/components/overflow-menu/usage.mdx","titleType":"prepend","MdxNode":{"id":"f49eaa42-a1b2-50a4-b74b-ebc2b12a4b60","children":[],"parent":"02bb710b-75c7-56d8-be3e-15dea3d01704","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":"c3f6ec3c6ec0b5fb6ddc4c201f903693","counter":1548,"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/1dde86ed/src/pages/components/overflow-menu/usage.mdx"}}}}