Kendo UI Tabstrip with Slanted Tabs

By September 12, 2016CSS, Kendo UI
Here’s another fun tip for Kendo UI developers – a tabstrip with slanted tabs. Did you know you can put additional elements into a Kendo UI tab? Let’s look at how to use an additional element to add a slant to your tabs.
First, start with a basic tabstrip:

Nothing fancy here, just tabs with some dummy content.

2016-09-10-14_29_21-kendo-ui-slanted-tabs-jsfiddle

Then add an additional element inside the tab itself (not the content). This will be the “arrow” or the slanted side of the tab. Since the tabstrip is created using  the <li> element, we can add our arrow inside.

Now, to make it a slant, we will use some CSS magic using borders to create triangles.  Really, it is a box with 0 width and height, and thick borders visible only on two sides, which gives us the triangle look. Neat!

2016-09-10-14_36_47-kendo-ui-slanted-tabs-jsfiddle

We just need position the arrow correctly so that it extends the tab container with a bit of overlap. And now we have slanted tabs.

2016-09-10-14_30_27-kendo-ui-slanted-tabs-jsfiddle

And the best part is that the Kendo UI styling takes care of the style changes and z-index changes needed to make the tab selection look nice.

Here’s the full example you can try out for yourself:

If you like this post, check out some of Falafel’s other blogs for KendoUI tips and problem-solving.

The following two tabs change content below.

Latest posts by Falafel Posts (see all)