CODEWITHSUNDEEP
jsfprimefaces
Justin Kredible
Justin Kredible

Reputation: 8414

Make tabs appear vertically on the side when using PrimeFaces TabView

I'm using the PrimeFaces TabView and would like to know if there is a way to make the tabs appear vertically on the side (left or right, preferably left) instead of horizontally across the top.

If anyone knows of any other way to achieve the desired effect using PrimeFaces or plain JSF, I'll take that too.

Upvotes: 5

Views: 9009

Answers (4)

hossein sargazi moghaddam
hossein sargazi moghaddam

Reputation: 71

This code shows how to manage tabs in TOP-DOWN order (vertically):

<p:tabView orientation="left">
        <p:tab title="Tab#1">
            Tab#1
        </p:tab>
        <p:tab title="Tab#2">
            Tab#2
        </p:tab>
        <p:tab title="Tab#3">
            Tab#3
        </p:tab>
        <p:tab title="Tab#4">
            Tab#4
        </p:tab>
</p:tabView>

And, this code shows how to manage tabs in LEFT-RIGHT or vise-versa order (horizontally):

<p:tabView scrollable="true">
        <p:tab title="Tab#1">
            Tab#1
        </p:tab>
        <p:tab title="Tab#2">
            Tab#2
        </p:tab>
        <p:tab title="Tab#3">
            Tab#3
        </p:tab>
        <p:tab title="Tab#4">
            Tab#4
        </p:tab>
        <p:tab title="Tab#5">
            Tab#5
        </p:tab>
        <p:tab title="Tab#6">
            Tab#6
        </p:tab>
        <p:tab title="Tab#7">
            Tab#7
        </p:tab>
        <p:tab title="Tab#8">
            Tab#8
        </p:tab>
</p:tabView>

Upvotes: 1

fareed
fareed

Reputation: 3072

Yes its possible. You can use the orientation attribute

Upvotes: 4

Mark
Mark

Reputation: 17162

PrimeFaces TabView is implemented using jQuery UI Tabs. Have a look at this question Vertical Tabs with jQuery. You could try to over ride the PrimeFaces tab CSS with the answer provided in that question to give you vertical tabs.

Upvotes: 1

maple_shaft
maple_shaft

Reputation: 10463

I do not believe it is possible according to the documentation, however perhaps you can utilize the Menu component to your advantage?

http://www.primefaces.org/showcase/ui/menu.jsf

I have used the Menu within a Master page to load content into the master page body. Clicking on a specific menu will load the appropriate child page.

Upvotes: -1

Related Questions