Show Drupal 8 Content in Tabs, Using Views

| Drupal
Show Drupal Content in Tabs, Using Views

One of our OSTraining members asked how best to make a tabbed view of content in Drupal 8. We already have a whole class on tabs in Drupal 7, but D8 works differently.

For this tutorial, I used 2 content types: "Article" and "News". We are going to show the Articles in one tab, and the News in a second tab.

In Drupal 8, you can make tabs without using any extra modules at all.

As a tip, I used the Devel module to create some dummy content for this exercise. You don't have to do this, but Devel always make it easy to test content-heavy tasks.

Once we have our content, we can go ahead and make our view.

  • Go to Structure > Views > Add a new view. and set the view settings.

Logically you would be tempted here to select "Create a page or Create a block", but I found doing so created an issue. So skip these and we will explain how to make these from the view.

  • Enter a "View name" and click "Save and edit".

Creating a new view

Now we need to add a page display. When we do this the default Master will become hidden. 

  • Click "Add" and choose "Page".

2

  • Update the display name. This is going to display our Article entries, so I am going to rename it to "Articles". 
  • Update the Menu from 'No menu' to  'Default menu tab'. Be sure to add a 'Menu link title' and save. On the next page 'Already exists' should be selected by default. Select "apply".
  • We also need to set a Path as doing it this way does not generate a path to start with. The path will bring up this first page, which for us will be using Articles.

I've updated the fields and tweaked the display. See below if you want your view to look exactly the same.

3

  • Now we need to duplicate the page display. This will create the second tab.

4

Update the following settings

  • Display Name
  • Path
  • Menu

5

  • Now update the "Filter Criteria" so that it only displays the News content. Be sure to set that it only applies to this display:

6

Now if you click on articles and news you should see that the content changes. 

Save the view and go to the path we designated for the primary view - in my case drupal/example - and you should see the same as I have below.

7

Now that works, but I want the Title to display above the body. To achieve this, we need to take a couple of steps. First, I'm going to hide the 'Body' and 'Title' fields.

8

Next, I'm going to display the Body and Title fields, but in the way I want. I'm going to add a "Global: Custom text" field, with a rewrite rule that places the 'Title' above the 'Body' content for display.

9

And that should give you a final display like this:

10


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.