ANCHOR-NAV (Globale Elemente )

src/app/shared/components/anchor-nav/templates

Demo Section

Each variation will be presented in the following section.

Default (Linkcount <= 6)

Zum Inhalt springen

Extended (Linkcount > 6)

Zum Inhalt springen

Block-Variation Date (all without Javascript)

Zum Veröffentlichungsdatum springen

Block-Variation Type (all without Javascript)

Zum Dokumententyp springen

Readme

anchorNav (component)

Description

This component represents a link list with 1-n items. In Variation ‘Derfault’ or ‘Extended’ If there are more than 6 items, only these 6 items are visible initially and a toggle button has to be rendered which on click shows/hides all additional links. It has smooth scrolling considering fixed header height. Used for thee Site Anchor Navigation. Variation ‘Block’: Has anker in a block without Javascript and button solution. All items will be shown. Used for exampole for the open Publication

JIRA

Requirements

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/anchor-nav

Fields

anchor-nav.hbs

Settings

Parameter Type Default Description
settings.anchorNavContextClass String 'default' Context class of component
settings.anchorNavClasses String '' Modifier classes for component
settings.anchorNavJsOptions Object null JavaScript options object which gets stringified in the markup
settings.hiddenListItemsId String '' Id of toggle wrapper for hidden anchor links
settings.anchorNavJsOff Boolean Removes all JavaScript-specific attributes from the module parent-Element
settings.JsOff Boolean Removes all JavaScript-specific attributes from the Anker-Itemm in anchor-nav__item
settings.noFrame Boolean Removes all JavaScript-specific attributes from the module

Content

Parameter Type Description
content.headline String Headline text for anchor nav
content.itemsVisible Array Array of list items for visible anchor links
content.itemsHidden Array Array of list items for hidden anchor links
content.cta Object Data for CTA button responsible for toggling hidden links

anchor-nav__item.hbs

Settings

Parameter Type Default Description
settings.tabIndex Number undefined Tabindex of links (must be set to -1 for hidden links)

Content

Parameter Type Description
content.linkHref String Href of link (e.g. #section-1)
content.title String Link title
content.linkText String Link text

JavaScript Options

The module gives you the possibility to override default JS options:

Option Type Default Description
selectors.anchorLink String '[data-js-item="anchor-link"]' Element selector for anchor link
selectors.header String '[data-js-item="header"]' Element selector for header
selectors.hiddenList String '[data-js-item="hidden-list"]' Element selector for hidden list
toggleMoreLinksEvt String 'cta:toggleMoreAnchorNavLinks' Event which shows/hides additional links

Templates

anchor-nav.hbs

<div class="c-anchor-nav{{#if
		settings.anchorNavContextClass}}--{{settings.anchorNavContextClass}}{{else}}--default{{/if}}{{#if
		settings.anchorNavClasses}} {{settings.anchorNavClasses}}{{/if}}"
     data-css="c-anchor-nav"
     {{#if settings.anchorNavJsOff}}{{else}}data-js-module="anchor-nav"{{/if}}{{#if settings.anchorNavJsOptions}}
     data-js-options='{{stringify settings.anchorNavJsOptions}}'{{/if}}>

	{{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
			{{#if content.headline}}<h3 class="anchor-nav__headline">{{content.headline}}</h3>{{/if}}

			<ul class="anchor-nav__list">
				{{#each content.itemsVisible}}
					{{> anchor-nav__item }}
				{{/each}}
			</ul>
			{{#if settings.hiddenListItemsId}}
				<div id="{{settings.hiddenListItemsId}}" class="anchor-nav__hidden-list-wrapper is-closed"
				     data-js-item="hidden-list">
					<ul class="anchor-nav__list">
						{{#each content.itemsHidden}}
							{{> anchor-nav__item }}
						{{/each}}
					</ul>
				</div>
			{{/if}}

			{{#with content.cta}}
				<div class="anchor-nav__cta-wrapper">
					{{#wrapWith "cta" settings=this.settings content=this.content}}
						{{> cta__content this.content}}
					{{/wrapWith}}
				</div>
			{{/with}}
		{{/wrapWith}}
	{{/wrapWith}}
</div>

anchor-nav__item.hbs

<li class="anchor-nav__list-item">
	<a class="anchor-nav__link"
	   href="{{#if content.linkHref}}{{content.linkHref}}{{else}}#{{/if}}" {{#if settings.jsOff}}{{else}}data-js-item="anchor-link"{{/if}}{{#if
			settings.tabIndex}} tabindex="{{settings.tabIndex}}"{{/if}} title="{{content.title}}">
		{{{ content.linkText }}}
	</a>
</li>

Data File

anchor-nav.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default (Linkcount <= 6)"
			},
			"settings": {
				"anchorNavClasses": "isnt-extended"
			},
			"content": {
				"headline": "Zum Inhalt springen",
				"itemsVisible": [
					{
						"content": {
							"linkHref": "#link-target-1",
							"linkText": "Teaserslider",
							"title": "Springe zu: Teaserslider"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-2",
							"linkText": "TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text",
							"title": "Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-3",
							"linkText": "TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text",
							"title": "Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-4",
							"linkText": "TM021.1 | Redaktionelle Teaser - 100% mit Bild",
							"title": "Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "TM021.1 | Redaktionelle Teaser - 100% mit Bild",
							"title": "Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "TM021.1 | Redaktionelle Teaser - 100% mit Bild",
							"title": "Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild"
						}
					}
				]
			}
		},
		"extended": {
			"docs": {
				"variationName": "Extended (Linkcount > 6)"
			},
			"settings": {
				"anchorNavClasses": false,
				"hiddenListItemsId": "unique-id-hidden-list"
			},
			"content": {
				"headline": "Zum Inhalt springen",
				"itemsVisible": [
					{
						"content": {
							"linkHref": "#link-target-1",
							"linkText": "Teaserslider",
							"title": "Springe zu: Teaserslider"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-2",
							"linkText": "TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text",
							"title": "Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-3",
							"linkText": "TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text",
							"title": "Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-4",
							"linkText": "TM021.1 | Redaktionelle Teaser - 100% mit Bild",
							"title": "Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "TM021.1 | Redaktionelle Teaser - 100% mit Bild",
							"title": "Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild"
						}
					},
					{
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "TM021.1 | Redaktionelle Teaser - 100% mit Bild",
							"title": "Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild"
						}
					}
				],
				"itemsHidden": [
					{
						"settings": {
							"tabIndex": "-1"
						},
						"content": {
							"linkHref": "#link-target-7",
							"linkText": "TM021.2 | Redaktionelle Teaser - 50% nur Titel",
							"title": "Springe zu: TM021.2 | Redaktionelle Teaser - 50% nur Titel"
						}
					},
					{
						"settings": {
							"tabIndex": "-1"
						},
						"content": {
							"linkHref": "#link-target-8",
							"linkText": "TM021.3 | Redaktionelle Teaser - 50% mit Bild",
							"title": "Springe zu: TM021.3 | Redaktionelle Teaser - 50% mit Bild"
						}
					},
					{
						"settings": {
							"tabIndex": "-1"
						},
						"content": {
							"linkHref": "#link-target-9",
							"linkText": "TM021.4 | Redaktionelle Teaser - 33% mit Bild",
							"title": "Springe zu: TM021.4 | Redaktionelle Teaser - 33% mit Bild"
						}
					},
					{
						"settings": {
							"tabIndex": "-1"
						},
						"content": {
							"linkHref": "#link-target-10",
							"linkText": "SM068 | Filterbare Listen: Teaser",
							"title": "Springe zu: SM068 | Filterbare Listen: Teaser"
						}
					}
				],
				"cta": {
					"settings": {
						"ctaButton": true,
						"ctaContextClass": "anchor-nav",
						"ctaJsItem": false,
						"ctaJsModule": true,
						"jsOptions": {
							"globalEvent": "cta:toggleMoreAnchorNavLinks",
							"closedLabel": "Mehr anzeigen",
							"openedLabel": "Weniger anzeigen"
						},
						"attributes": [
							{
								"name": "aria-haspopup",
								"value": "true"
							},
							{
								"name": "aria-controls",
								"value": "unique-id-hidden-list"
							},
							{
								"name": "aria-expanded",
								"value": "false"
							}
						]
					},
					"content": {
						"settings": {
							"ctaIcon": false,
							"ctaContentJsItem": true
						},
						"content": {
							"ctaContent": "Mehr anzeigen"
						}
					}
				}
			}
		},
		"blockdate": {
			"docs": {
				"variationName": "Block-Variation Date (all without Javascript)"
			},
			"settings": {
				"anchorNavContextClass": "block",
				"anchorNavJsOff": true,
				"anchorNavClasses": "isnt-extended"
			},
			"content": {
				"headline": "Zum Veröffentlichungsdatum springen",
				"itemsVisible": [
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-1",
							"linkText": "1992",
							"title": "1992"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-2",
							"linkText": "1994",
							"title": "1994"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-3",
							"linkText": "1995",
							"title": "1995"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-4",
							"linkText": "1996",
							"title": "1996"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "1998",
							"title": "1998"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "1999",
							"title": "1999"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "2000",
							"title": "2000"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "2002",
							"title": "2002"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "2004",
							"title": "2004"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "2005",
							"title": "2005"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "2006",
							"title": "2006"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "2007",
							"title": "2007"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "2008",
							"title": "2008"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "2009",
							"title": "2009"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "2010",
							"title": "2010"
						}
					}
				]
			}
		},
		"blocktype": {
			"docs": {
				"variationName": "Block-Variation Type (all without Javascript)"
			},
			"settings": {
				"anchorNavContextClass": "block",
				"anchorNavJsOff": true,
				"anchorNavClasses": "isnt-extended",
				"noFrame": true
			},
			"content": {
				"headline": "Zum Dokumententyp springen",
				"itemsVisible": [
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-1",
							"linkText": "Monographie",
							"title": "Monographie"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-2",
							"linkText": "Herausgeberschaft",
							"title": "Herausgeberschaft"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-3",
							"linkText": "Hochschulschrift",
							"title": "Hochschulschrift"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-4",
							"linkText": "Zeitschriftenartikel",
							"title": "Zeitschriftenartikel"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "Buchbeitrag",
							"title": "Buchbeitrag"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "Paper",
							"title": "Paper"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-5",
							"linkText": "Zeitungsartikel",
							"title": "Zeitungsartikel"
						}
					},
					{
						"settings": {
							"jsOff": true
						},
						"content": {
							"linkHref": "#link-target-6",
							"linkText": "Konferenzbeitrag",
							"title": "Konferenzbeitrag"
						}
					}
				]
			}
		}
	}
}

Styles

anchor-nav.scss

/* ===================================================
component: anchor-nav
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-anchor-nav"] {

	@include print() {
		display: none;
	}

	.anchor-nav__headline {
		font-size: 1.7rem;
		line-height: (24/17);
		letter-spacing: .3px;
		font-family: $font-regular;
		font-weight: 400;
		color: $color-gray;

		text-transform: uppercase;

	}

	&.isnt-extended {

		.anchor-nav__list {
			position: relative;

			&::before {
				@include pseudo();

				width: 100%;
				height: 1px;
				background: $color-gray-border;
				bottom: 0;
				left: 0;
			}
		}
	}

	.anchor-nav__list {
		@include clearfix();

		display: flex;
		flex-wrap: wrap;
	}

	.anchor-nav__link {
		position: relative;
		display: block;

		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		color: $color-green;
		text-decoration: none;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		transition: color $animation-duration-std $animation-easing-std, transform $animation-duration-std $animation-easing-std, background-color $animation-duration-std $animation-easing-std;

		&:hover,
		&.a11y-focus-key {
			color: $color-dark;
			outline-offset: -2px;

			&::before {
				transform: translateY(-3px);
				opacity: 0;
			}

			&::after {
				transform: translateY(-3px);
				opacity: 1;
			}
		}

		&:focus {
			outline: none;
		}

		&::before,
		&::after {
			@include pseudo();
			@include centering(v);

			left: 0;
			transform: translateY(-6px);
			transition: opacity $animation-duration-std $animation-easing-std, transform $animation-duration-std $animation-easing-std;
		}

		&::before {
			@include sprites-icon-arrow-down-green();

			opacity: 1;
		}

		&::after {
			@include sprites-icon-arrow-down-gray();

			opacity: 0;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-anchor-nav--default {
	margin-bottom: 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	.anchor-nav__headline {
		margin-bottom: 15px;
	}

	&.isnt-extended {

		.anchor-nav__list {
			padding-bottom: 50px;
		}
	}


	.anchor-nav__list-item {
		width: 100%;
		display: flex;

		@include bp($bp-tablet-p) {
			width: 49%;
			//justify-content: start;
		}
	}

	.anchor-nav__hidden-list-wrapper {
		@include clearfix();

		transition: height $animation-duration-std $animation-easing-std, opacity $animation-duration-std $animation-easing-std $animation-duration-std / 2;
		overflow: hidden;
		position: relative;
		margin-top: -2px;

		&.is-calculating {
			width: 100% !important;
		}

		&.is-closed {
			opacity: 0;
			height: 2px;
		}

		&.is-open {
			opacity: 1;
			z-index: 1;
		}
	}

	.anchor-nav__cta-wrapper {
		width: 100%;
		display: inline-block;
		text-align: center;
		position: relative;
		margin-top: 30px;

		&::after {
			@include pseudo();

			z-index: 1;
			height: 1px;
			width: 100%;
			background: $color-gray-border;
			top: 50%;
			left: 0;
			right: 0;
		}
	}

	.anchor-nav__link {
		padding: 15px 30px;
	}
}

.c-anchor-nav--block {

	margin-bottom: 40px;

	.anchor-nav__headline {
		margin-bottom: 10px;
	}

	&.isnt-extended {
		.anchor-nav__list {
			padding-bottom: 20px;
		}
	}

	.anchor-nav__list-item {
		display: flex;
		max-width: 100%;
	}

	.anchor-nav__link {
		margin-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
		padding: 5px 10px 5px 25px;
	}

}

Scripts

anchor-nav.js

/**
 * AnchorNav represents a simple link list for anchor links, it has smooth scrolling
 * considering fixed header height. It supports a toggle more button for showing initially hidden links
 *
 * Class properties and decorators are supported.
 *
 * @module AnchorNav
 * @version v1.0.0
 *
 * @author Andy Gutsche
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';
import Toggler from '../../toggler/scripts/toggler';
import scrollToElement from '../../../utilities/helpers/scroll-to-element';

class AnchorNav extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);
	$hiddenList = $(this.options.selectors.hiddenList, this.el);
	$header = $(this.options.selectors.header);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				anchorLink: '[data-js-item="anchor-link"]',
				header: '[data-js-item="header"]',
				hiddenList: '[data-js-item="hidden-list"]'
			},
			classes: {},
			toggleMoreLinksEvt: 'cta:toggleMoreAnchorNavLinks'
		};

		super(obj, options);
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.anchorLink}}': 'handleClick'
		};
	}

	/**
	 * Handle click on anchor link
	 *
	 * @param {Object} e - Event object
	 * @param {Node} currentTarget - Event target
	 */
	handleClick(e, currentTarget) {
		e.preventDefault();

		let id = currentTarget.href.split('#');

		if (id.length > 1) {
			let browserWidth = this.context.detections.width;
			let offsetposition = -(this.$header.outerHeight() + 20);
			if (browserWidth < 768) {
				offsetposition = -20;
			}
			scrollToElement(document.getElementById(`${id[1]}`), {
				offset: offsetposition
			});
		}
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */
	didMount() {
		if (!this.$hiddenList.length) {
			return;
		}

		this.listToggler = new Toggler({
			el: this.$hiddenList[0],
			namespace: 'Toggler',
			context: this.context,
			options: {
				globalEvent: this.options.toggleMoreLinksEvt,
				globalEventId: this.instanceId,
				setOverflow: true,
				toggleTabindexElems: this.options.selectors.anchorLink
			}
		});

		this.listToggler.create();
		this.listToggler.didMount();
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default AnchorNav;

HTML Output

Default (Linkcount <= 6)

<div class="c-anchor-nav--default isnt-extended" data-css="c-anchor-nav" data-js-module="anchor-nav">
	<div class="grid__container">
		<div class="grid__row">
			<h3 class="anchor-nav__headline">Zum Inhalt springen</h3>
			<ul class="anchor-nav__list">
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-1" data-js-item="anchor-link" title="Springe zu: Teaserslider">
						Teaserslider
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-2" data-js-item="anchor-link" title="Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text">
						TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-3" data-js-item="anchor-link" title="Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text">
						TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-4" data-js-item="anchor-link" title="Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild">
						TM021.1 | Redaktionelle Teaser - 100% mit Bild
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" data-js-item="anchor-link" title="Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild">
						TM021.1 | Redaktionelle Teaser - 100% mit Bild
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" data-js-item="anchor-link" title="Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild">
						TM021.1 | Redaktionelle Teaser - 100% mit Bild
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Extended (Linkcount > 6)

<div class="c-anchor-nav--default" data-css="c-anchor-nav" data-js-module="anchor-nav">
	<div class="grid__container">
		<div class="grid__row">
			<h3 class="anchor-nav__headline">Zum Inhalt springen</h3>
			<ul class="anchor-nav__list">
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-1" data-js-item="anchor-link" title="Springe zu: Teaserslider">
						Teaserslider
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-2" data-js-item="anchor-link" title="Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text">
						TM015.1 | Teaser-Paar (Afrika-Variante) | Bild + Text
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-3" data-js-item="anchor-link" title="Springe zu: TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text">
						TM015.1 | Teaser-Paar (Afrika-Variante) | Text + Text
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-4" data-js-item="anchor-link" title="Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild">
						TM021.1 | Redaktionelle Teaser - 100% mit Bild
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" data-js-item="anchor-link" title="Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild">
						TM021.1 | Redaktionelle Teaser - 100% mit Bild
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" data-js-item="anchor-link" title="Springe zu: M021.1 | Redaktionelle Teaser - 100% mit Bild">
						TM021.1 | Redaktionelle Teaser - 100% mit Bild
					</a>
				</li>
			</ul>
			<div id="unique-id-hidden-list" class="anchor-nav__hidden-list-wrapper is-closed" data-js-item="hidden-list">
				<ul class="anchor-nav__list">
					<li class="anchor-nav__list-item">
						<a class="anchor-nav__link" href="#link-target-7" data-js-item="anchor-link" tabindex="-1" title="Springe zu: TM021.2 | Redaktionelle Teaser - 50% nur Titel">
							TM021.2 | Redaktionelle Teaser - 50% nur Titel
						</a>
					</li>
					<li class="anchor-nav__list-item">
						<a class="anchor-nav__link" href="#link-target-8" data-js-item="anchor-link" tabindex="-1" title="Springe zu: TM021.3 | Redaktionelle Teaser - 50% mit Bild">
							TM021.3 | Redaktionelle Teaser - 50% mit Bild
						</a>
					</li>
					<li class="anchor-nav__list-item">
						<a class="anchor-nav__link" href="#link-target-9" data-js-item="anchor-link" tabindex="-1" title="Springe zu: TM021.4 | Redaktionelle Teaser - 33% mit Bild">
							TM021.4 | Redaktionelle Teaser - 33% mit Bild
						</a>
					</li>
					<li class="anchor-nav__list-item">
						<a class="anchor-nav__link" href="#link-target-10" data-js-item="anchor-link" tabindex="-1" title="Springe zu: SM068 | Filterbare Listen: Teaser">
							SM068 | Filterbare Listen: Teaser
						</a>
					</li>
				</ul>
			</div>
			<div class="anchor-nav__cta-wrapper">
				<button class="c-cta--anchor-nav" data-css="c-cta" data-js-module="cta" data-js-options='{&quot;globalEvent&quot;:&quot;cta:toggleMoreAnchorNavLinks&quot;,&quot;closedLabel&quot;:&quot;Mehr anzeigen&quot;,&quot;openedLabel&quot;:&quot;Weniger anzeigen&quot;}'>
					<span class="cta__content" data-js-item="cta-content">
						Mehr anzeigen
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

Block-Variation Date (all without Javascript)

<div class="c-anchor-nav--block isnt-extended" data-css="c-anchor-nav">
	<div class="grid__container">
		<div class="grid__row">
			<h3 class="anchor-nav__headline">Zum Veröffentlichungsdatum springen</h3>
			<ul class="anchor-nav__list">
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-1" title="1992">
						1992
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-2" title="1994">
						1994
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-3" title="1995">
						1995
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-4" title="1996">
						1996
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="1998">
						1998
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="1999">
						1999
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="2000">
						2000
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="2002">
						2002
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="2004">
						2004
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="2005">
						2005
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="2006">
						2006
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="2007">
						2007
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="2008">
						2008
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="2009">
						2009
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="2010">
						2010
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Block-Variation Type (all without Javascript)

<div class="c-anchor-nav--block isnt-extended" data-css="c-anchor-nav">
	<div class="grid__container">
		<div class="grid__row">
			<h3 class="anchor-nav__headline">Zum Dokumententyp springen</h3>
			<ul class="anchor-nav__list">
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-1" title="Monographie">
						Monographie
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-2" title="Herausgeberschaft">
						Herausgeberschaft
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-3" title="Hochschulschrift">
						Hochschulschrift
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-4" title="Zeitschriftenartikel">
						Zeitschriftenartikel
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="Buchbeitrag">
						Buchbeitrag
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="Paper">
						Paper
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-5" title="Zeitungsartikel">
						Zeitungsartikel
					</a>
				</li>
				<li class="anchor-nav__list-item">
					<a class="anchor-nav__link" href="#link-target-6" title="Konferenzbeitrag">
						Konferenzbeitrag
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link