Navigation

The Navigation component displays a logo and a list of internal or external links for site navigation.

Preview

Fields

  • logo (optional) - A switchable field for logo image selection:

    • If image is selected:

      • image (required) - Internal image chooser from Magnolia DAM.

      • altText (optional) - Alt text for accessibility.

    • If externalImage is selected:

      • externalImage (required) - Full URL to the external image.

      • externalImageAlt (optional) - Alt text for accessibility.

  • links (required) - A list field. At least one item is required. Each link item includes:

    • field - Switchable field to define link type:

      • If internalLink is selected:

        • internalLink (required) - Magnolia page chooser.

        • text (required) - The text displayed for the link.

      • If externalLink is selected:

        • externalLink (required) - Full URL.

        • text (required) - The text displayed for the link.

Behavior

  • If a logo is provided, it is displayed on the left side of the navigation bar.

  • Navigation links are displayed horizontally on the right.

  • Each link opens the specified internal or external target.

  • Styling and layout are handled via the front-end implementation.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Navigation -p navigation
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules