Content Navigation

A reusable horizontal scrollable navigation pattern with gradient fade masks and keyboard navigation support.

Purpose

The Content Navigation component provides a horizontal scrollable list of navigation items, commonly used for:

• Category filtering
• Section navigation
• Tag navigation
• Topic browsing

Features

• Horizontal scrolling with smooth behavior
• Gradient fade masks on left/right edges when content overflows
• Navigation arrow buttons on mobile viewports
• Keyboard navigation (Arrow Left/Right)
• Active state styling
• Responsive design with different behavior for mobile and desktop

Usage

Basic Implementation

{% include "@patterns/content-navigation/content-navigation.twig" with {
  items: [
    {
      label: "Rechtsprechung",
      url: "#",
      active: true
    },
    {
      label: "Rechtspolitik & Gesetzgebung",
      url: "#"
    },
    {
      label: "Gesetzesvorhaben",
      url: "#"
    }
  ]
} only %}

With Many Items

{% include "@patterns/content-navigation/content-navigation.twig" with {
  items: [
    { label: "Item 1", url: "#", active: true },
    { label: "Item 2", url: "#" },
    { label: "Item 3", url: "#" },
    { label: "Item 4", url: "#" },
    { label: "Item 5", url: "#" },
    { label: "Item 6", url: "#" },
    { label: "Item 7", url: "#" }
  ]
} only %}

Without URLs (Buttons)

Items without URLs render as <span> elements instead of links:

{% include "@patterns/content-navigation/content-navigation.twig" with {
  items: [
    {
      label: "Category 1",
      active: true
    },
    {
      label: "Category 2"
    }
  ]
} only %}

Properties

Property	Type	Required	Description
items	array	Yes	Array of navigation items
attributes	object	No	Additional HTML attributes
classes	array	No	Additional CSS classes

Item Properties

Property	Type	Required	Description
label	string	Yes	Link/button text
url	string	No	Link URL (if omitted, renders as span)
active	boolean	No	Active state styling

Responsive Behavior

Mobile (< 768px)

• Arrow buttons visible when content overflows
• Gradient masks applied to indicate scroll direction
• Buttons hide when at start/end of scroll

Desktop (≥ 768px)

• Arrow buttons hidden
• Full navigation visible if space permits
• No gradient masks

Accessibility

Keyboard Navigation

• Tab: Focus navigation items
• Arrow Left/Right: Navigate between items when focused
• Enter/Space: Activate focused link/button

ARIA

• Navigation landmark with <nav> element
• aria-label="Content navigation" on nav landmark
• aria-current="page" on active items
• Arrow buttons use visually hidden text (not aria-label) for better translation support

Screen Readers

• Semantic HTML for navigation
• Proper link/button roles
• Active state announced

JavaScript Behavior

The component uses a Web Component (<content-navigation>) for enhanced functionality:

Scroll Behavior

• Smooth scrolling on arrow button clicks
• Auto-update arrow visibility based on scroll position
• Dynamic gradient mask updates

Scroll Amount

Arrow buttons scroll approximately 80% of the container width per click.

Element Visibility

Focused elements automatically scroll into view when navigating with arrow keys.

Integration with Drupal

Add the library dependency to your component:

dependencies:
  - circle_dot/pattern-content-navigation

The component will automatically load required CSS and JavaScript.

Browser Support

• Modern browsers (last 3 versions)
• Progressive enhancement for older browsers (scrolling works without JS)

Related Components

• Used in: @template-components/ressort-header
• Similar to: @patterns/tabs (but for navigation, not tab panels)

// src/components/patterns/content-navigation/content-navigation.twig

{{ attach_library("circle_dot/pattern-content-navigation") }}

<nav
	class="ContentNavigation {{ classes|join(' ') }}"
	aria-label="Content navigation"
	{{ attributes }}
>
	<content-navigation>
		<button
			type="button"
			class="ContentNavigation-prev"
			hidden
		>
			<span class="u-hiddenVisually">Previous items</span>
			{% include "@elements/icon/icon.twig" with {
				name: "caret-left",
			} only %}
		</button>

		<div class="ContentNavigation-scroll">
			<ul class="ContentNavigation-list">
				{% for item in items %}
					<li class="ContentNavigation-item">
						{% if item.url %}
							<a
								href="{{ item.url }}"
								class="ContentNavigation-link{% if item.active %} ContentNavigation-link--active{% endif %}"
								{% if item.active %}aria-current="page"{% endif %}
							>
								{{ item.label }}
							</a>
						{% else %}
							<span class="ContentNavigation-link{% if item.active %} ContentNavigation-link--active{% endif %}">
								{{ item.label }}
							</span>
						{% endif %}
					</li>
				{% endfor %}
			</ul>
		</div>

		<button
			type="button"
			class="ContentNavigation-next"
			hidden
		>
			<span class="u-hiddenVisually">Next items</span>
			{% include "@elements/icon/icon.twig" with {
				name: "caret-right",
			} only %}
		</button>
	</content-navigation>
</nav>