Breeze - A Free Drupal Theme Using Bootstrap

breeze-new-logoBreeze is a Drupal theme that is really, really easy to use.

We use Breeze as an example in many of our Drupal video classes.

How to install Breeze in Drupal 8

Breeze is a sub-theme of the very popular Bootstrap theme, so we'll need to install both.

  • Download and install the Bootstrap theme.
  • Download and install the Breeze theme.
  • Go to the "Appearance" tab.
  • Click "Install and set as default" next to Breeze.
Install and enable the Breeze Drupal 8 theme
  • Go to Structure > Block layout.
  • Click "Demonstrate block regions (Breeze Drupal 8 Theme)"
  • You'll now see a layout of your theme's regions:
Theme regions in the Breeze Drupal 8 theme
  • Click "Exit block region demonstration"

We're now going to put the necessary blocks into the correct regions.

  • Move the "Main navigation" block to the "Navigation" region. This will place the main menu.
  • Move the "Search" block to the "Secondary region".
  • Move the "Site branding" block to the "Header" region. This will place the site logo.

You might also want to configure the "Site branding" block to remove the "Site name" feature.

  • Click "Configure" next to the "Site branding" block.
  • Make sure that only the "Site logo' box is checked.
Editing the site branding block in the Breeze Drupal 8 theme

if you want to have dropdown menus on your site, you'll also need to do this:

  • Click "Configure" next to the "Main navigation" block.
  • Change "Maximum number of menu levels to display" to more than 1.
Editing the menu block in the Breeze Drupal 8 theme

Now when you visit your site, it should look like the image below.

the Breeze Drupal 8 them

Here's how the dropdown menus will appear:

Dropdown menus in the Breeze Drupal 8 theme