📁 Categories Widget Design Guide

Categories widgets provide taxonomic navigation, allowing users browse content by topic/theme rather than chronologically. Well-organized категорії improve findability, reduce bounce rates (users find relevant content faster), та reveal site structure. Для mushroom education hub, категорії might separate species profiles, cultivation guides, safety information, та research articles. Effective design balances visibility (not overwhelming), post counts (показати категорія depth), та hierarchical relationships (parent/child categories). Цей guide охоплює flat vs hierarchical structures, post count badges, expandable menus, та mobile behavior.

🎨 Category Widget Styles

Style 1: Flat List з Count Badges

📁 Browse by Category

Style 2: Hierarchical з Expand/Collapse

📂 Categories

💻 HTML & CSS Implementation

Style 1: Flat List з Badges

<!-- HTML -->
<aside class="categories-widget">
  <h3 class="widget-title">📁 Browse by Category</h3>
  <ul class="category-list">
    <li class="category-item">
      <a href="/category/species" class="category-link">
        <span class="category-name">🍄 Species Profiles</span>
        <span class="category-count">48</span>
      </a>
    </li>
    <!-- More categories -->
  </ul>
</aside>

<!-- CSS -->
<style>
.category-list {
  list-style: none;
  padding: 0;
}

.category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  color: #2c3e50;
  border-radius: 6px;
  transition: all 0.2s;
}

.category-link:hover {
  background: #fff8f9;
  color: #ff9a9e;
}

.category-count {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}
</style>

Style 2: Hierarchical з JavaScript

<!-- HTML -->
<ul class="category-tree">
  <li class="category-parent">
    <div class="category-parent-link" onclick="toggleCategory(this)">
      <span>🍄 Species</span>
      <span>
        <span class="toggle-icon">▶</span>
        <span class="category-count">48</span>
      </span>
    </div>
    <ul class="subcategories">
      <li><a href="/species/psilocybe">Psilocybe (35)</a></li>
      <!-- More subcategories -->
    </ul>
  </li>
</ul>

<!-- CSS -->
<style>
.subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 20px;
}

.category-parent.expanded .subcategories {
  max-height: 500px; /* Adjust based на content */
}

.toggle-icon {
  transition: transform 0.3s;
}

.category-parent.expanded .toggle-icon {
  transform: rotate(90deg);
}
</style>

<!-- JavaScript -->
<script>
function toggleCategory(element) {
  const parent = element.closest('.category-parent');
  parent.classList.toggle('expanded');
}
</script>

Dynamic Generation від Data:

// JavaScript class для categories widget
class CategoriesWidget {
  constructor(containerSelector, categories) {
    this.container = document.querySelector(containerSelector);
    this.categories = categories;
    this.render();
  }
  
  render() {
    const html = this.categories.map(cat => {
      if (cat.children && cat.children.length > 0) {
        return this.renderParent(cat);
      } else {
        return this.renderSimple(cat);
      }
    }).join('');
    
    this.container.innerHTML = html;
  }
  
  renderSimple(category) {
    return `
      <li class="category-item">
        <a href="${category.url}" class="category-link">
          <span>${category.icon} ${category.name}</span>
          <span class="category-count">${category.count}</span>
        </a>
      </li>
    `;
  }
  
  renderParent(category) {
    const children = category.children.map(child => `
      <li>
        <a href="${child.url}" class="subcategory-link">
          <span>${child.name}</span>
          <span class="category-count">${child.count}</span>
        </a>
      </li>
    `).join('');
    
    return `
      <li class="category-parent">
        <div class="category-parent-link" onclick="toggleCategory(this)">
          <span>${category.icon} ${category.name}</span>
          <span>
            <span class="toggle-icon">▶</span>
            <span class="category-count">${category.count}</span>
          </span>
        </div>
        <ul class="subcategories">${children}</ul>
      </li>
    `;
  }
}

// Usage
const categories = [
  {
    name: 'Species Profiles',
    icon: '🍄',
    url: '/category/species',
    count: 48,
    children: [
      { name: 'Psilocybe', url: '/species/psilocybe', count: 35 },
      { name: 'Panaeolus', url: '/species/panaeolus', count: 8 }
    ]
  },
  // ... more categories
];

new CategoriesWidget('#categoriesList', categories);

✅ Categories Widget Checklist

Implementation Checklist:

  • ☐ 5-8 top-level categories (not overwhelming)
  • ☐ Emojis або icons для visual distinction
  • ☐ Post counts displayed
  • ☐ Hierarchical structure (if applicable)
  • ☐ Expand/collapse functionality (nested categories)
  • ☐ Hover effects visible
  • ☐ Active category highlighted
  • ☐ Sorted logically (alphabetic або by count)
  • ☐ Links functional та SEO-friendly
  • ☐ Mobile: Collapsible accordion
  • ☐ Performance: No large category trees (100+ items)
  • ☐ Accessibility: Keyboard navigable