Product Categories List For HTML, JavaScript, PHP, And SQL

This page provides ready-to-use Product Categories lists for HTML dropdowns, JavaScript arrays, PHP arrays, and SQL statements. These snippets offer a comprehensive structure of product categories, ranging from Electronics & Technology to Pets, designed for easy copying and integration into your projects.

If you're creating a web form, a website's back-end, or a database, you can find the necessary code below. Just copy the part you need and paste it into your project, which will save you time and keep your application's category structure consistent.

You can copy and paste these snippets directly into your projects, making changes to match your product and application needs.

HTML Drop Down

Here is the section of the HTML code for an Product Categories Selection drop-down

HTML

<select id="product-category" name="product-category">
    <optgroup label="Electronics & Technology">
        <option value="electronics">Electronics</option>
        <option value="computers">Computers & Accessories</option>
        <option value="smartphones">Smartphones & Tablets</option>
    </optgroup>
    <optgroup label="Fashion & Beauty">
        <option value="clothing">Clothing</option>
        <option value="shoes">Shoes</option>
        <option value="accessories">Accessories</option>
        <option value="beauty-health">Beauty & Health</option>
    </optgroup>
    <optgroup label="Home & Living">
        <option value="home-garden">Home & Garden</option>
        <option value="furniture">Furniture</option>
        <option value="kitchenware">Kitchenware</option>
    </optgroup>
    <optgroup label="Sports & Outdoors">
        <option value="sports">Sports Equipment</option>
        <option value="outdoor-gear">Outdoor Gear</option>
        <option value="fitness">Fitness & Wellness</option>
    </optgroup>
    <optgroup label="Automotive & Industrial">
        <option value="automotive">Automotive</option>
        <option value="tools">Tools & Home Improvement</option>
    </optgroup>
    <optgroup label="Entertainment & Media">
        <option value="books">Books</option>
        <option value="movies-music">Movies & Music</option>
        <option value="toys-games">Toys & Games</option>
    </optgroup>
    <optgroup label="Food & Beverages">
        <option value="food-drink">Food & Drink</option>
        <option value="groceries">Groceries</option>
    </optgroup>
    <optgroup label="Office & Education">
        <option value="office-supplies">Office Supplies</option>
        <option value="school-supplies">School Supplies</option>
    </optgroup>
    <optgroup label="Pets">
        <option value="pet-supplies">Pet Supplies</option>
        <option value="pet-food">Pet Food</option>
    </optgroup>
</select>

Run code Edit Code Download

JavaScript Array

Uses an array of objects, each representing a main category with nested subcategories.

JavaScript

const productCategories = [
  {
    name: "Electronics & Technology",
    subcategories: [
      { value: "electronics", label: "Electronics" },
      { value: "computers", label: "Computers & Accessories" },
      { value: "smartphones", label: "Smartphones & Tablets" }
    ]
  },
  {
    name: "Fashion & Beauty",
    subcategories: [
      { value: "clothing", label: "Clothing" },
      { value: "shoes", label: "Shoes" },
      { value: "accessories", label: "Accessories" },
      { value: "beauty-health", label: "Beauty & Health" }
    ]
  },
  {
    name: "Home & Living",
    subcategories: [
      { value: "home-garden", label: "Home & Garden" },
      { value: "furniture", label: "Furniture" },
      { value: "kitchenware", label: "Kitchenware" }
    ]
  },
  {
    name: "Sports & Outdoors",
    subcategories: [
      { value: "sports", label: "Sports Equipment" },
      { value: "outdoor-gear", label: "Outdoor Gear" },
      { value: "fitness", label: "Fitness & Wellness" }
    ]
  },
  {
    name: "Automotive & Industrial",
    subcategories: [
      { value: "automotive", label: "Automotive" },
      { value: "tools", label: "Tools & Home Improvement" }
    ]
  },
  {
    name: "Entertainment & Media",
    subcategories: [
      { value: "books", label: "Books" },
      { value: "movies-music", label: "Movies & Music" },
      { value: "toys-games", label: "Toys & Games" }
    ]
  },
  {
    name: "Food & Beverages",
    subcategories: [
      { value: "food-drink", label: "Food & Drink" },
      { value: "groceries", label: "Groceries" }
    ]
  },
  {
    name: "Office & Education",
    subcategories: [
      { value: "office-supplies", label: "Office Supplies" },
      { value: "school-supplies", label: "School Supplies" }
    ]
  },
  {
    name: "Pets",
    subcategories: [
      { value: "pet-supplies", label: "Pet Supplies" },
      { value: "pet-food", label: "Pet Food" }
    ]
  }
];

Usage Example

Use this array to create a dropdown menu category selection

HTML

<select id="product-category"></select>

javaScripr

const productSelect = document.getElementById("product-category");

productCategories.forEach(category => {
	const optgroup = document.createElement("optgroup");
    optgroup.label = category.name;

    category.subcategories.forEach(subcategory => {
      const option = document.createElement('option');
      option.value = subcategory.value;
      option.textContent = subcategory.label;
      optgroup.appendChild(option);
    });

    productSelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

Array of product categories with their respective subcategories

PHP

<?php
$productCategories = [
    [
        'name' => 'Electronics & Technology',
        'subcategories' => [
            ['value' => 'electronics', 'label' => 'Electronics'],
            ['value' => 'computers', 'label' => 'Computers & Accessories'],
            ['value' => 'smartphones', 'label' => 'Smartphones & Tablets']
        ]
    ],
    [
        'name' => 'Fashion & Beauty',
        'subcategories' => [
            ['value' => 'clothing', 'label' => 'Clothing'],
            ['value' => 'shoes', 'label' => 'Shoes'],
            ['value' => 'accessories', 'label' => 'Accessories'],
            ['value' => 'beauty-health', 'label' => 'Beauty & Health']
        ]
    ],
    [
        'name' => 'Home & Living',
        'subcategories' => [
            ['value' => 'home-garden', 'label' => 'Home & Garden'],
            ['value' => 'furniture', 'label' => 'Furniture'],
            ['value' => 'kitchenware', 'label' => 'Kitchenware']
        ]
    ],
    [
        'name' => 'Sports & Outdoors',
        'subcategories' => [
            ['value' => 'sports', 'label' => 'Sports Equipment'],
            ['value' => 'outdoor-gear', 'label' => 'Outdoor Gear'],
            ['value' => 'fitness', 'label' => 'Fitness & Wellness']
        ]
    ],
    [
        'name' => 'Automotive & Industrial',
        'subcategories' => [
            ['value' => 'automotive', 'label' => 'Automotive'],
            ['value' => 'tools', 'label' => 'Tools & Home Improvement']
        ]
    ],
    [
        'name' => 'Entertainment & Media',
        'subcategories' => [
            ['value' => 'books', 'label' => 'Books'],
            ['value' => 'movies-music', 'label' => 'Movies & Music'],
            ['value' => 'toys-games', 'label' => 'Toys & Games']
        ]
    ],
    [
        'name' => 'Food & Beverages',
        'subcategories' => [
            ['value' => 'food-drink', 'label' => 'Food & Drink'],
            ['value' => 'groceries', 'label' => 'Groceries']
        ]
    ],
    [
        'name' => 'Office & Education',
        'subcategories' => [
            ['value' => 'office-supplies', 'label' => 'Office Supplies'],
            ['value' => 'school-supplies', 'label' => 'School Supplies']
        ]
    ],
    [
        'name' => 'Pets',
        'subcategories' => [
            ['value' => 'pet-supplies', 'label' => 'Pet Supplies'],
            ['value' => 'pet-food', 'label' => 'Pet Food']
        ]
    ]
];
?>

Usage Example PHP Array

Use this PHP array to create dropdown selection

PHP

<?php
$html = '';
foreach ($productCategories as $category) {
	$html .= '<optgroup label="' . htmlspecialchars($category['name']) . '">';
	foreach ($category['subcategories'] as $subcategory) {
		$html .= '<option value="' . htmlspecialchars($subcategory['value']) . '">'
		. htmlspecialchars($subcategory['label'])
		. '</option>'.PHP_EOL;
	}
	$html .= '</optgroup>'.PHP_EOL;
}
?>

<select id="product-category">
	<?php echo $html ?>
</select>

Download

SQL Table

Creates two tables - one for main categories (category_groups) and another for subcategories (categories), with a foreign key relationship between them. The INSERT statements populate these tables with the data.

SQL

-- Create the tables
CREATE TABLE category_groups (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

CREATE TABLE categories (
    id INT AUTO_INCREMENT PRIMARY KEY,
    group_id INT,
    value VARCHAR(50) NOT NULL,
    label VARCHAR(255) NOT NULL,
    FOREIGN KEY (group_id) REFERENCES category_groups(id)
);

-- Insert data into category_groups
INSERT INTO category_groups (name) VALUES
('Electronics & Technology'),
('Fashion & Beauty'),
('Home & Living'),
('Sports & Outdoors'),
('Automotive & Industrial'),
('Entertainment & Media'),
('Food & Beverages'),
('Office & Education'),
('Pets');

-- Insert data into categories
INSERT INTO categories (group_id, value, label) VALUES
(1, 'electronics', 'Electronics'),
(1, 'computers', 'Computers & Accessories'),
(1, 'smartphones', 'Smartphones & Tablets'),
(2, 'clothing', 'Clothing'),
(2, 'shoes', 'Shoes'),
(2, 'accessories', 'Accessories'),
(2, 'beauty-health', 'Beauty & Health'),
(3, 'home-garden', 'Home & Garden'),
(3, 'furniture', 'Furniture'),
(3, 'kitchenware', 'Kitchenware'),
(4, 'sports', 'Sports Equipment'),
(4, 'outdoor-gear', 'Outdoor Gear'),
(4, 'fitness', 'Fitness & Wellness'),
(5, 'automotive', 'Automotive'),
(5, 'tools', 'Tools & Home Improvement'),
(6, 'books', 'Books'),
(6, 'movies-music', 'Movies & Music'),
(6, 'toys-games', 'Toys & Games'),
(7, 'food-drink', 'Food & Drink'),
(7, 'groceries', 'Groceries'),
(8, 'office-supplies', 'Office Supplies'),
(8, 'school-supplies', 'School Supplies'),
(9, 'pet-supplies', 'Pet Supplies'),
(9, 'pet-food', 'Pet Food');

Download

Report Problem