In this video, I will show you how to create a Quicktabs block using the "ui_tabs" renderer that will contain a view in each tab. To do that, I'll first show you how to install and enable the view module, add a view that displays the latest articles and enable the archive view.

We'll start by installing the Views module.

Install modules

Enable modules

  • Go to "Modules" (admin/modules) and enable:
    • Views
    • Views UI
  • (Save configuration)

Now, we'll create a very basic view that lists articles with the most recent first

Add new View

  • Go to "Structure => Views => Add new view" (admin/structure/views/add)
    • View name: Latest Articles
    • Show: Content
      • of type: Article
    • sorted by: Choose "Newest first"
    • Uncheck "Create a page" (We don't actually want a page for this since we'll only be displaying it within a Quicktab. And we don't need a block because Quicktabs can use the "Master" display.
  • (Save & exit)

Now, let's enable the archive view so that we can use it in the second tab.

Enable the Archive View

  • View name: Archive
  • Operations: Click the "Enable" button

Now we're ready to create a Quicktab that uses these views.

Create a new Quicktab

  • Go to "Structure => Quicktabs => Add Quicktabs Instance" (admin/structure/quicktabs/add)
    • Title: Tabbed Views
    • Renderer: Choose "ui_tabs"
    • [x] History
    • Default tab: "- None -"
    • [x] Hide empty tabs
    • Tab Title: Latest Articles
      • Tab Type: [x] view
      • Select a view: latest_articles
      • Display: default: Master
      • Arguments: (If you're using contextual filters in your view, you can enter arguments here. We don't need any, but the option is here in case you need them.)
    • Tab Title: Archive
      • Tab Type: [x] view
      • Select a view: archive
      • Display: page: Page (You'll see that you can use any of the views displays, and it might even be beneficial to create a new display specifically for use by Quicktabs, but I'm just going to use Page display to show that it works.)
  • (Save)

Manage block

  • Go to "Structure => blocks" (admin/structure/blocks)
  • Scroll down to Disabled blocks
    • Block: Tabbed Views
      • Region: Choose "Content"
  • Scroll up to Content blocks and Move it to the top of the list
  • (Save blocks)

Now, when we go home, we'll see the "Tabbed Views" Quicktab using the "ui_tabs" renderer. You'll also see that when I click one of the tabs, a hashtag is added to the URL. This is because we chose to enable the "History" option, and is what lets us use the forward and back arrows in the browser, as well as bookmark the page with a specific tab active.

In the next video, we're going to experience a little inception and create a Quicktab which contains a Quicktab in each tab. (Try saying that three times fast!)