Bulma Panel

The Bulma Panel component is a versatile container that's perfect for creating sidebars, navigation menus, accordions, and settings panels. It provides a clean, structured way to organize related content.

Basic Panel

Simple panel with heading and content:

<nav class="panel">
  <p class="panel-heading">Repositories</p>
  
  <div class="panel-block">
    <p>Repository 1</p>
  </div>
  
  <div class="panel-block">
    <p>Repository 2</p>
  </div>
</nav>

Panel with Icons

<nav class="panel">
  <p class="panel-heading">
    <span class="icon"><i class="fas fa-cog"></i></span>
    Settings
  </p>
  
  <div class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-user"></i>
    </span>
    Profile
  </div>
  
  <div class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-bell"></i>
    </span>
    Notifications
  </div>
</nav>

Panel as Navigation

Use panels for sidebar navigation:

<nav class="panel">
  <p class="panel-heading">Menu</p>
  
  <a class="panel-block is-active">
    <span class="panel-icon"><i class="fas fa-home"></i></span>
    Dashboard
  </a>
  
  <a class="panel-block">
    <span class="panel-icon"><i class="fas fa-inbox"></i></span>
    Inbox
    <span class="tag is-primary is-pulled-right">3</span>
  </a>
  
  <a class="panel-block">
    <span class="panel-icon"><i class="fas fa-calendar"></i></span>
    Calendar
  </a>
  
  <div class="panel-block">
    <button class="button is-link is-outlined is-fullwidth">
      View All
    </button>
  </div>
</nav>

Panel with Search

<nav class="panel">
  <p class="panel-heading">Filters</p>
  
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search"></i>
      </span>
    </p>
  </div>
  
  <div class="panel-block">
    <div class="control">
      <div class="tags">
        <span class="tag">Filter 1</span>
        <span class="tag">Filter 2</span>
        <a class="tag is-delete"></a>
      </div>
    </div>
  </div>
</nav>

Panel Colors

Apply color modifiers to panels:

<!-- Primary panel -->
<nav class="panel is-primary">
  <p class="panel-heading">Primary Panel</p>
  <!-- content -->
</nav>

<!-- Info panel -->
<nav class="panel is-info">
  <p class="panel-heading">Info Panel</p>
  <!-- content -->
</nav>

<!-- Success panel -->
<nav class="panel is-success">
  <p class="panel-heading">Success Panel</p>
  <!-- content -->
</nav>

<!-- Warning panel -->
<nav class="panel is-warning">
  <p class="panel-heading">Warning Panel</p>
  <!-- content -->
</nav>

<!-- Danger panel -->
<nav class="panel is-danger">
  <p class="panel-heading">Danger Panel</p>
  <!-- content -->
</nav>

Accordion Panels

Create collapsible accordions:

<div class="panel">
  <div class="panel-heading" onclick="toggleAccordion(this)">
    Section 1
    <span class="icon is-pulled-right">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  
  <div class="panel-block is-hidden">
    <div class="content">
      <p>Content for section 1</p>
    </div>
  </div>
  
  <div class="panel-heading" onclick="toggleAccordion(this)">
    Section 2
    <span class="icon is-pulled-right">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
  
  <div class="panel-block is-hidden">
    <div class="content">
      <p>Content for section 2</p>
    </div>
  </div>
</div>

<script>
function toggleAccordion(element) {
  const content = element.nextElementSibling;
  const icon = element.querySelector('.icon i');
  
  content.classList.toggle('is-hidden');
  icon.classList.toggle('fa-angle-down');
  icon.classList.toggle('fa-angle-up');
}
</script>

Panel with Checkboxes and Radio Buttons

<nav class="panel">
  <p class="panel-heading">Permissions</p>
  
  <label class="panel-block">
    <input type="checkbox">
    Read access
  </label>
  
  <label class="panel-block">
    <input type="checkbox">
    Write access
  </label>
  
  <label class="panel-block">
    <input type="checkbox">
    Delete access
  </label>
</nav>

<nav class="panel">
  <p class="panel-heading">Theme</p>
  
  <label class="panel-block">
    <input type="radio" name="theme" value="light">
    Light Mode
  </label>
  
  <label class="panel-block">
    <input type="radio" name="theme" value="dark">
    Dark Mode
  </label>
  
  <label class="panel-block">
    <input type="radio" name="theme" value="auto">
    Auto
  </label>
</nav>

Panel with Tabs

<nav class="panel">
  <div class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </div>
  
  <div class="panel-block">
    <!-- Content for All tab -->
  </div>
  
  <div class="panel-block is-hidden">
    <!-- Content for Public tab -->
  </div>
</nav>

JavaScript Integration

Make panels interactive:

// Toggle panel blocks
document.querySelectorAll('.panel-heading').forEach(heading => {
  heading.addEventListener('click', () => {
    const content = heading.nextElementSibling;
    content.classList.toggle('is-hidden');
  });
});

// Filter panel items
function filterPanelItems(searchTerm) {
  const panelItems = document.querySelectorAll('.panel-block');
  
  panelItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    if (text.includes(searchTerm.toLowerCase())) {
      item.style.display = 'flex';
    } else {
      item.style.display = 'none';
    }
  });
}

// Handle checkbox selections
document.querySelectorAll('.panel-block input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', (e) => {
    const panelBlock = e.target.closest('.panel-block');
    if (e.target.checked) {
      panelBlock.classList.add('has-background-light');
    } else {
      panelBlock.classList.remove('has-background-light');
    }
  });
});

Practical Examples

User Settings Panel

<div class="columns">
  <div class="column is-3">
    <nav class="panel">
      <p class="panel-heading">Account Settings</p>
      
      <a class="panel-block is-active">
        <span class="panel-icon"><i class="fas fa-user"></i></span>
        Profile
      </a>
      
      <a class="panel-block">
        <span class="panel-icon"><i class="fas fa-lock"></i></span>
        Security
      </a>
      
      <a class="panel-block">
        <span class="panel-icon"><i class="fas fa-bell"></i></span>
        Notifications
        <span class="tag is-warning is-pulled-right">2</span>
      </a>
      
      <a class="panel-block">
        <span class="panel-icon"><i class="fas fa-credit-card"></i></span>
        Billing
      </a>
      
      <a class="panel-block">
        <span class="panel-icon"><i class="fas fa-shield-alt"></i></span>
        Privacy
      </a>
      
      <div class="panel-block">
        <button class="button is-danger is-outlined is-fullwidth">
          Delete Account
        </button>
      </div>
    </nav>
  </div>
  
  <div class="column is-9">
    <!-- Settings content here -->
  </div>
</div>

File Browser Panel

<nav class="panel">
  <p class="panel-heading">
    <span class="icon"><i class="fas fa-folder"></i></span>
    Files
  </p>
  
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" placeholder="Search files...">
      <span class="icon is-left">
        <i class="fas fa-search"></i>
      </span>
    </p>
  </div>
  
  <div class="panel-block">
    <span class="panel-icon"><i class="fas fa-folder"></i></span>
    Documents
    <span class="tag is-light is-pulled-right">12</span>
  </div>
  
  <div class="panel-block">
    <span class="panel-icon"><i class="fas fa-folder"></i></span>
    Images
    <span class="tag is-light is-pulled-right">45</span>
  </div>
  
  <div class="panel-block">
    <span class="panel-icon"><i class="fas fa-folder"></i></span>
    Videos
    <span class="tag is-light is-pulled-right">8</span>
  </div>
  
  <div class="panel-block">
    <span class="panel-icon"><i class="fas fa-music"></i></span>
    Music
    <span class="tag is-light is-pulled-right">23</span>
  </div>
  
  <div class="panel-block">
    <button class="button is-primary is-outlined is-fullwidth">
      Upload New File
    </button>
  </div>
</nav>

Task Management Panel

<nav class="panel">
  <p class="panel-heading">Tasks</p>
  
  <div class="panel-tabs">
    <a class="is-active">All</a>
    <a>Pending</a>
    <a>Completed</a>
  </div>
  
  <label class="panel-block">
    <input type="checkbox">
    <span class="icon"><i class="fas fa-circle text-primary"></i></span>
    Design homepage
    <span class="tag is-light is-pulled-right">Today</span>
  </label>
  
  <label class="panel-block">
    <input type="checkbox" checked>
    <span class="icon"><i class="fas fa-circle text-success"></i></span>
    <del>Write documentation</del>
    <span class="tag is-success is-pulled-right">Done</span>
  </label>
  
  <label class="panel-block">
    <input type="checkbox">
    <span class="icon"><i class="fas fa-circle text-warning"></i></span>
    Fix mobile layout
    <span class="tag is-warning is-pulled-right">Tomorrow</span>
  </label>
  
  <div class="panel-block">
    <div class="field has-addons is-fullwidth">
      <div class="control is-expanded">
        <input class="input" type="text" placeholder="Add new task...">
      </div>
      <div class="control">
        <button class="button is-primary">
          <i class="fas fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</nav>

Best Practices

• Use panels for grouping related navigation items or settings
• Include icons for better visual recognition
• Use panel-tabs for filtering panel content
• Make panels responsive - consider collapsing on mobile
• Use color coding for different panel types or priorities
• Provide clear visual feedback for active/inactive states
• Consider using panels for sidebar navigation in admin interfaces

Next: Bulma Progress Component