No notes defined.
<div class="navigationPanel has-backdrop">
<h2 class="navigationPanel-title">The Section Title</h2>
<div class="navigationPanel-nav">
<div class="dropdownNav">
<div class="combobox" data-select>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="" data-label="Vinyl pug cardigan">
<a href=#option-1-selected><label>Vinyl pug cardigan</label></a>
</li>
<li class="combobox-item" data-value="" data-label="Flexitarian Retro">
<a href=#option-2-selected><label>Flexitarian Retro</label></a>
</li>
<li class="combobox-item" data-value="" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="navigationPanel has-backdrop{{#modifier}} {{.}}{{/modifier}}">
{{#title}}<h2 class="navigationPanel-title">{{{.}}}</h2>{{/title}}
<div class="navigationPanel-nav">
{{#dropdownnav}}
{{render '@dropdownnav' (contextData '@navigationpanel' this) merge=true}}
{{/dropdownnav}}
</div>
</div>
{
"title": "The Section Title",
"dropdownnav": {
"combobox": {
"is-select": true,
"placeholder": null,
"options": [
{
"label": "Vinyl pug cardigan",
"url": "#option-1-selected"
},
{
"label": "Flexitarian Retro",
"url": "#option-2-selected"
},
{
"label": "Plaid 8-bit",
"is-disabled": true
}
]
}
}
}
@import "_navigationPanel.styles";
.pageHeader[data-theme="dark"] + %navigationPanel {
padding-top: 0;
margin-top: calc(-1 * var(--bw-large)) !important;
%navigationPanel-nav {
margin-left: 0;
}
}
%navigationPanel {
@include stack-spacing(section);
padding-block: var(--sp-section);
@extend %dark-theme;
@include full-width-backdrop();
.dropdownNav {
@include stack-spacing(0);
}
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
margin-bottom: var(--sp-component);
}
@include only-on-desktop(){
&-nav {
width: get-columns-width(6);
margin-inline: auto;
}
}
& + .has-backdrop[data-theme="dark"] {
padding-top: 0;
margin-top: calc(var(--sp-component) - var(--sp-section)) !important;
}
}
.navigationPanel {
@extend %navigationPanel;
&-title {
@extend %navigationPanel-title;
}
&-nav {
@extend %navigationPanel-nav;
}
}