Designing various UI interaction patterns

1. Modal Pattern (Popup Dialog)

<!-- Modal Trigger Button -->

<button id="openModal">Show Modal</button>

<!-- Modal Structure -->

<div id="modal" style="display:none; position:fixed;top:0;left:0;width:100vw;height:100vh; background:rgba(0,0,0,0.5); justify-content:center;align-items:center;">

  <div style="background:#fff; padding:2rem; border-radius:8px; min-width:200px;">

    <p>This is a modal dialog.</p>

    <button id="closeModal">Close</button>

  </div>

</div>

<script>

  openModal.onclick = () => modal.style.display = "flex";

  closeModal.onclick = () => modal.style.display = "none";

</script>

2. Tab Navigation Pattern

<div>

  <button class="tab" onclick="showTab(0)">Profile</button>

  <button class="tab" onclick="showTab(1)">Settings</button>

</div>

<div id="tabsContent">

  <div class="tab-pane">Profile Content</div>

  <div class="tab-pane" style="display:none">Settings Content</div>

</div>

<script>

  function showTab(idx) {

    let panes = document.querySelectorAll('.tab-pane');

    panes.forEach((p,i) => p.style.display = i===idx ? "block" : "none");

  }

</script>

3. Accordion (Expandable Sections)

<button class="accordion" onclick="togglePanel(this)">Show Info</button>

<div class="panel" style="display:none;padding:1rem;background:#f2f2f2;">

  This is hidden info inside an accordion section.

</div>

<script>

function togglePanel(btn) {

  let panel = btn.nextElementSibling;

  panel.style.display = panel.style.display === "block" ? "none" : "block";

}

</script>

4. Toast Notification Pattern

<button onclick="showToast()">Show Toast</button>

<div id="toast" style="visibility:hidden;min-width:180px;background:#333;color:#fff;text-align:center; border-radius:4px; padding:1rem; position:fixed;bottom:20px;right:20px;">

  Action completed!

</div>

<script>

function showToast() {

  let t=document.getElementById('toast');

  t.style.visibility='visible';

  setTimeout(()=>t.style.visibility='hidden',3000);

}

</script>

5. Breadcrumb Navigation Pattern

<nav aria-label="breadcrumb">

  <ol style="display:flex; list-style:none;">

    <li><a href="#">Home</a> &gt; </li>

    <li><a href="#">Products</a> &gt; </li>

    <li>Details</li>

  </ol>

</nav>