{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/navigate-the-application/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Navigating the application","navTitle":null,"slug":"design/navigate-the-application/","hidePage":false,"collapsibleGroup":"patterns","group":null,"seoDescription":null,"cosmosComponent":{"component":{"component":"navigate","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"To effectively work within your application, users must be able to navigate content quickly and intuitively. Constellation helps users navigate your application with the following components:"},"body":[{"id":"56352f83-aba6-5383-9fa4-27029b65480e","strapi_component":"layout.section","title":"Main navigation","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The [main navigation](/versions/8/design/app-shell) provides quick access to the core content in the application. From here, users can access the home page, check notifications about previous items they worked on, and refer to pinned items throughout their work day."}},{"id":"c335f60f-0559-50cc-8faf-9e550b8fff34","strapi_component":"demo.code-editor","demo":{"demoName":"AppShellDemo","component":"AppShell","package":"core"}},{"id":"b2dd3ede-e6ea-5545-b3b3-2254e4e3d40b","strapi_component":"layout.section","title":"Breadcrumbs","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"[Breadcrumbs](/versions/8/design/breadcrumbs) let users view a hierarchy of data or a path of locations leading them to the current page or view. This helps users understand the context of their current view and quickly go to related content. For example, users may use the breadcrumbs in the case header to see and go to the parent case of the current case."}},{"id":"6dae8246-c5d5-5004-8502-5167b60c7d0b","strapi_component":"demo.code-editor","demo":{"demoName":"BreadcrumbsDemo","component":"Breadcrumbs","package":"core"}},{"id":"48329efc-0a8c-5c5b-88a1-7f5c3b73ed45","strapi_component":"layout.section","title":"Links","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"[Links](/versions/8/design/link) take users to content outside of the current view."}},{"id":"4f97773e-1750-5e12-95a5-53d9b8a74be2","strapi_component":"demo.code-editor","demo":{"demoName":"LinkDemo","component":"Link","package":"core"}},{"id":"559c4d9c-474e-57b1-b35b-6a4f69e08944","strapi_component":"layout.section","title":"Tabs","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"[Tabs](/versions/8/design/tabs) allow users to view and hide grouped content. Users select a set of content they'd like to see. They can switch between different sets of content, so the information does not overwhelm the current view."}},{"id":"f6e7add3-54a4-51be-9598-6b5b5e5e9bc3","strapi_component":"demo.code-editor","demo":{"demoName":"TabsDemo","component":"Tabs","package":"core"}},{"id":"c0822991-b7ec-5b5f-837c-b49c32e8df54","strapi_component":"layout.section","title":"Menus","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"Menus offer a list of actions or choices for users to act on. In Constellation, menus may allow grouping similar actions to help users navigate more intuitively."}},{"id":"ab076e42-4448-5ae5-938f-32989d261c9e","strapi_component":"demo.code-editor","demo":{"demoName":"MenuDemo","component":"Menu","package":"core"}}],"relatedComponents":[]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Navigating the application","navTitle":null,"slug":"design/navigate-the-application/","hidePage":false,"collapsibleGroup":"patterns","group":null,"seoDescription":null,"cosmosComponent":{"component":{"component":"navigate","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"To effectively work within your application, users must be able to navigate content quickly and intuitively. Constellation helps users navigate your application with the following components:"},"body":[{"id":"56352f83-aba6-5383-9fa4-27029b65480e","strapi_component":"layout.section","title":"Main navigation","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The [main navigation](/versions/8/design/app-shell) provides quick access to the core content in the application. From here, users can access the home page, check notifications about previous items they worked on, and refer to pinned items throughout their work day."}},{"id":"c335f60f-0559-50cc-8faf-9e550b8fff34","strapi_component":"demo.code-editor","demo":{"demoName":"AppShellDemo","component":"AppShell","package":"core"}},{"id":"b2dd3ede-e6ea-5545-b3b3-2254e4e3d40b","strapi_component":"layout.section","title":"Breadcrumbs","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"[Breadcrumbs](/versions/8/design/breadcrumbs) let users view a hierarchy of data or a path of locations leading them to the current page or view. This helps users understand the context of their current view and quickly go to related content. For example, users may use the breadcrumbs in the case header to see and go to the parent case of the current case."}},{"id":"6dae8246-c5d5-5004-8502-5167b60c7d0b","strapi_component":"demo.code-editor","demo":{"demoName":"BreadcrumbsDemo","component":"Breadcrumbs","package":"core"}},{"id":"48329efc-0a8c-5c5b-88a1-7f5c3b73ed45","strapi_component":"layout.section","title":"Links","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"[Links](/versions/8/design/link) take users to content outside of the current view."}},{"id":"4f97773e-1750-5e12-95a5-53d9b8a74be2","strapi_component":"demo.code-editor","demo":{"demoName":"LinkDemo","component":"Link","package":"core"}},{"id":"559c4d9c-474e-57b1-b35b-6a4f69e08944","strapi_component":"layout.section","title":"Tabs","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"[Tabs](/versions/8/design/tabs) allow users to view and hide grouped content. Users select a set of content they'd like to see. They can switch between different sets of content, so the information does not overwhelm the current view."}},{"id":"f6e7add3-54a4-51be-9598-6b5b5e5e9bc3","strapi_component":"demo.code-editor","demo":{"demoName":"TabsDemo","component":"Tabs","package":"core"}},{"id":"c0822991-b7ec-5b5f-837c-b49c32e8df54","strapi_component":"layout.section","title":"Menus","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"Menus offer a list of actions or choices for users to act on. In Constellation, menus may allow grouping similar actions to help users navigate more intuitively."}},{"id":"ab076e42-4448-5ae5-938f-32989d261c9e","strapi_component":"demo.code-editor","demo":{"demoName":"MenuDemo","component":"Menu","package":"core"}}],"relatedComponents":[]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}