> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# NIU Sidebar Trigger Container

# Allgemeine Beschreibung

Das "NIU Sidebar Trigger Container" Portlet fungiert als interaktiver Schalter (Auslöser) für deine angelegten Sidebars. Du platzierst diesen Container einfach an der gewünschten Stelle in deinem Shop und legst dort beispielsweise einen Button, ein Icon oder einen Text hinein. Sobald ein Kunde auf dieses Element klickt, öffnet sich automatisch die von dir verknüpfte Sidebar.

# Einsatzmöglichkeiten (Inspiration)

* **Individuelle Menü-Buttons:** Baue dir einen eigenen "Hamburger"-Button oder nutze einen Textlink, der per Klick dein verstecktes Navigationsmenü (Off-Canvas) ausfährt.
* **Warenkorb-Aufruf:** Lege ein Warenkorb-Icon in diesen Container, um beim Klick darauf die Mini-Cart Sidebar an der Bildschirmseite hereinrutschen zu lassen.
* **Info-Trigger:** Nutze kleine Info-Icons oder "Mehr erfahren"-Texte, um Kunden detaillierte Erklärungen, Größentabellen oder Filter-Optionen in einer Seitenleiste anzuzeigen, ohne dass sie die aktuelle Seite verlassen müssen.

# Featureübersicht:

* **Nahtlose Verknüpfung:** Verbinde den Auslöser ganz einfach über ein Dropdown-Menü mit der passenden Sidebar.
* **Flexibles Layouting:** Steuere das CSS-Verhalten (die Anzeigeart) deines Trigger-Containers, damit er sich perfekt in den umgebenden Inhalt einfügt (z. B. als Inline-Element im Fließtext oder als eigenständiger Block).
* **Gezielte Content-Auswahl:** Nutze CSS-Selektoren, um bei Bedarf nur ganz bestimmte Inhalte in der Sidebar anzusprechen.

***

# Settings:

## Allgemein

In diesem Reiter legst du fest, welche Sidebar geöffnet werden soll und wie sich der Container auf deiner Seite verhält.

<Frame>
  <img src="https://mintcdn.com/dzm/M2x4BUQ6u-A35WZC/images/image-207.png?fit=max&auto=format&n=M2x4BUQ6u-A35WZC&q=85&s=ded303835d1ac51fd71ba87002cc0772" alt="Image" width="2381" height="1220" data-path="images/image-207.png" />
</Frame>

***

**Sidebar Selector:** Wähle hier über das Dropdown-Menü aus, welche deiner angelegten Sidebars durch den Klick auf diesen Container ausgelöst (geöffnet) werden soll. Zur Auswahl stehen in der Regel:

* NIU OPC Sidebar
* NIU OPC Sidebar Modal

**Sidebar Content Selektor:** Hier kannst du bei Bedarf einen spezifischen CSS-Selektor eintragen. Das ist besonders für fortgeschrittene Anwendungsfälle nützlich, wenn du innerhalb der Ziel-Sidebar noch einmal gezielt bestimmte Inhaltsbereiche ansprechen oder steuern möchtest.

<Note>
  Trage die ID deiner angelegten Sidebar ein, die getriggert werden soll
</Note>

**Block Typ:** Bestimme hier die grundlegende CSS-Display-Eigenschaft deines Trigger-Containers, damit er das Layout deiner Seite nicht ungewollt verschiebt. Du hast die Auswahl zwischen:

* **Block** = Das Element verhält sich wie ein klassischer Block und nimmt (wenn nicht anders definiert) die volle verfügbare Breite ein; es erzeugt in der Regel einen Zeilenumbruch.
* **Inline Block** = Das Element reiht sich neben anderen Elementen ein (wie Inline), du kannst ihm aber dennoch eine feste Breite und Höhe zuweisen.
* **Inline** = Das Element fließt ganz natürlich mit dem restlichen Text oder Inhalt mit, ohne Zeilenumbrüche zu erzeugen.
* **Flex** = Das Element nutzt das moderne CSS Flexbox-Layout, ideal um darin liegende Elemente (wie ein Icon und Text) flexibel aneinander auszurichten.

***

***