Dropdowns, Breadcrumb

---

Dropdowns

Dropdown Básico

Copy<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Ações
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Ação 1</a></li>
    <li><a class="dropdown-item" href="#">Ação 2</a></li>
    <li><a class="dropdown-item" href="#">Ação 3</a></li>
  </ul>
</div>

---

Dropdown em Link

Copy<div class="dropdown">
  <a class="btn btn-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Menu
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Opção 1</a></li>
    <li><a class="dropdown-item" href="#">Opção 2</a></li>
  </ul>
</div>

---

Dropdown com Divisor e Cabeçalho

Copy<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Mais Opções
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Seção 1</h6></li>
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">Seção 2</h6></li>
    <li><a class="dropdown-item" href="#">Item 3</a></li>
  </ul>
</div>

---

Dropdown alinhado à direita

Copy<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Opções
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Configurações</a></li>
    <li><a class="dropdown-item" href="#">Sair</a></li>
  </ul>
</div>

---

Breadcrumb (Trilha de Navegação)

Indica ao usuário onde ele está dentro da hierarquia de páginas ou seções.

Exemplo Básico

Copy<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
    <li class="breadcrumb-item active" aria-current="page">Dados</li>
  </ol>
</nav>

• O último item da lista deve ter a classe active e o atributo aria-current="page" para indicar a página atual.

---

Breadcrumb com Layout Escuro

Copy<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark p-2 rounded">
    <li class="breadcrumb-item"><a class="text-light" href="#">Início</a></li>
    <li class="breadcrumb-item"><a class="text-light" href="#">Seção</a></li>
    <li class="breadcrumb-item active text-light" aria-current="page">Página Atual</li>
  </ol>
</nav>

---

Paginação

Paginação Básica

Copy<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Próximo</a></li>
  </ul>
</nav>

---

Paginação com Item Ativo e Desabilitado

Copy<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">Anterior</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">Próximo</a>
    </li>
  </ul>
</nav>

---

Paginação Alinhada

Copy<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Próximo</a></li>
  </ul>
</nav>

Use justify-content-center para centralizar e justify-content-end para alinhar à direita.

---

Tamanhos de Paginação

Copy<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>

---

Esses componentes são essenciais para melhorar a experiência de navegação dos usuários, permitindo criar menus dinâmicos, indicar hierarquia de páginas e organizar conteúdos paginados de forma eficiente e elegante.