# Page navigation component

import { SectionBreak } from "@emcm-ui/design-system/src/components/index.js";

import SectionHeaderLayout from "../../../design-system/src/templates/SectionHeaderLayout";
import Alert from "@emcm-ui/component-alert";
import Panel from "@emcm-ui/component-panel";
import VerticalSpacing from "@emcm-ui/component-vertical-spacing";
[import code for component visual]

## Visual

#### [is there a way to demo page links vs anchor links? + cta]
[interactive component]

#### [social sharing]
[interactive component]

<SectionBreak />

## Best practices

### Quick tips

<SectionHeaderLayout
dos={[
"Use the PageNavigation component under a Hero",
"Optionally include SocialShare or Button",
"Replicate the PageNavigation on each page linked within it. This provides a consistent user experience as users navigate to other pages",
"Use this to allow users to drill down into more specific content",
"Be thoughtful about hierarchy of content and the user experience. Only include PageNavigation on pages that are accessible from that navigation",
"Consider the use of PageNavigation on the site-level; if you use jump links in one experience and page links in another, it's a different interaction that might confuse users",
]}
donts={[
"Don't overuse PageNavigation. This is a prominent component on the page and takes cognitive effort to read and understand. We don't want users to be so over-burdened or distracted by PageNavigation that it isn't highly valuable and relevant to them",
"Don't use jump links on a short page; it's a burden to users and doesn't provide much benefit",
"Don't duplicate navigation offered in the SiteHeader",
]}
/>

See [Page navigation - Component overview](https://thehub.thomsonreuters.com/docs/DOC-2810493) for full AEM authoring guidance.

<SectionBreak />

## Related components
[Button](/lib-components-button-storybook)

[SocialShare](/lib-components-social-share-storybook)

[SiteHeader](/lib-components-site-header-storybook)