Tabs pure css tabs with horizontal and vertical mode

Tabs and navigation is control by input tag, id of each input should be unique.

navigation label should be set te same for as id of his input in the same order.

You could use any tag to list your pages to display, but do not change the display property of these elements.

Before you start, the maximum number of the supported tab set on core setup file, (default set to 10)

You can combine any other components with tabs, buttons, sections, menu, grid etc.

Case of use

horizontal - nowrap navs with menu component #

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quia temporibus officiis minima accusamus id culpa perspiciatis saepe aliquid quae, ducimus illum alias repudiandae, eveniet obcaecati omnis quidem enim soluta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti incidunt enim ut! Reiciendis repellat, ipsam corporis non similique consequatur minima! Nostrum sint quas vero molestiae sapiente numquam ipsam accusamus? Laudantium?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio voluptas ipsa molestias, error praesentium atque facilis expedita dignissimos obcaecati similique ex quo id minus itaque in ut, a magni quam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugiat reiciendis vero dolores at quo qui, nesciunt autem dolorum cum alias similique quidem placeat et est illum. Enim, totam autem!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id alias, rerum harum pariatur labore nulla incidunt laborum? Sed iure ratione quis veniam natus alias. Suscipit similique adipisci alias inventore est.
          
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quia temporibus officiis minima accusamus id culpa perspiciatis saepe aliquid quae, ducimus illum alias repudiandae, eveniet obcaecati omnis quidem enim soluta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti incidunt enim ut! Reiciendis repellat, ipsam corporis non similique consequatur minima! Nostrum sint quas vero molestiae sapiente numquam ipsam accusamus? Laudantium?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio voluptas ipsa molestias, error praesentium atque facilis expedita dignissimos obcaecati similique ex quo id minus itaque in ut, a magni quam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugiat reiciendis vero dolores at quo qui, nesciunt autem dolorum cum alias similique quidem placeat et est illum. Enim, totam autem!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id alias, rerum harum pariatur labore nulla incidunt laborum? Sed iure ratione quis veniam natus alias. Suscipit similique adipisci alias inventore est.

horizontal - wrap nav, auto with with menu component #

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam unde, ducimus repellat inventore nisi veritatis non praesentium recusandae iste error, consectetur doloremque nesciunt quibusdam magnam vitae! Nostrum voluptate nobis reprehenderit?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel ratione quasi est iste saepe. Nisi quaerat exercitationem mollitia, ratione voluptatibus, quia et iste temporibus reiciendis quae, eius nam consequuntur quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium natus tenetur suscipit ipsa. Et cumque quam iste minus aliquid dolores. Iure voluptates praesentium magnam excepturi nesciunt nostrum error, aliquam in?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae rerum ullam mollitia! Illo placeat consequuntur unde beatae magni perferendis omnis facere excepturi rem odit exercitationem, nesciunt numquam perspiciatis repellendus optio!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt sed perferendis. Quae molestias, dicta illo nostrum sit rerum, repudiandae vitae quis animi odio iste quasi voluptatibus? Laboriosam, nulla dolor?
          
            
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam unde, ducimus repellat inventore nisi veritatis non praesentium recusandae iste error, consectetur doloremque nesciunt quibusdam magnam vitae! Nostrum voluptate nobis reprehenderit?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel ratione quasi est iste saepe. Nisi quaerat exercitationem mollitia, ratione voluptatibus, quia et iste temporibus reiciendis quae, eius nam consequuntur quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium natus tenetur suscipit ipsa. Et cumque quam iste minus aliquid dolores. Iure voluptates praesentium magnam excepturi nesciunt nostrum error, aliquam in?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae rerum ullam mollitia! Illo placeat consequuntur unde beatae magni perferendis omnis facere excepturi rem odit exercitationem, nesciunt numquam perspiciatis repellendus optio!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt sed perferendis. Quae molestias, dicta illo nostrum sit rerum, repudiandae vitae quis animi odio iste quasi voluptatibus? Laboriosam, nulla dolor?

vertical with menu and grid component#

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim labore iste sint, culpa eius nisi corporis sit, iure est, atque omnis. Quidem similique officia veritatis delectus, atque rerum reiciendis quia?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et, consequuntur? Odio eos nulla nemo nobis alias sed, corrupti iure. Corrupti quaerat itaque rerum. Explicabo porro cupiditate magni, quas eaque soluta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti nam accusantium vero expedita ipsam placeat, exercitationem voluptatem nisi cupiditate sapiente, esse aut? Numquam aspernatur officiis debitis corporis harum recusandae illo?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem sapiente rem ea, voluptatem placeat ut inventore tempora officiis vel sit distinctio id odit consequatur iusto natus laboriosam neque dolor dolores!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repellat rerum odio neque iusto velit debitis officiis commodi, quibusdam ipsam, optio culpa? Fuga, facilis similique expedita illo aperiam voluptatem optio.
          
            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim labore iste sint, culpa eius nisi corporis sit, iure est, atque omnis. Quidem similique officia veritatis delectus, atque rerum reiciendis quia?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et, consequuntur? Odio eos nulla nemo nobis alias sed, corrupti iure. Corrupti quaerat itaque rerum. Explicabo porro cupiditate magni, quas eaque soluta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti nam accusantium vero expedita ipsam placeat, exercitationem voluptatem nisi cupiditate sapiente, esse aut? Numquam aspernatur officiis debitis corporis harum recusandae illo?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem sapiente rem ea, voluptatem placeat ut inventore tempora officiis vel sit distinctio id odit consequatur iusto natus laboriosam neque dolor dolores!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repellat rerum odio neque iusto velit debitis officiis commodi, quibusdam ipsam, optio culpa? Fuga, facilis similique expedita illo aperiam voluptatem optio.

with section component#

          
            

with section component#

          
          
        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, ea nostrum! Ipsum, itaque voluptatibus officia nihil amet similique tenetur doloremque ad sed unde pariatur neque maxime ullam vitae vero? Et.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur nostrum perferendis autem esse reprehenderit eligendi necessitatibus sunt accusamus dolores, repellat id, fuga neque quas, corporis dolorem consequuntur! Exercitationem, aliquam perspiciatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, ea nostrum! Ipsum, itaque voluptatibus officia nihil amet similique tenetur doloremque ad sed unde pariatur neque maxime ullam vitae vero? Et.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur nostrum perferendis autem esse reprehenderit eligendi necessitatibus sunt accusamus dolores, repellat id, fuga neque quas, corporis dolorem consequuntur! Exercitationem, aliquam perspiciatis.

with section component - auto-width#

          
            
        
        
      
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, ea nostrum! Ipsum, itaque voluptatibus officia nihil amet similique tenetur doloremque ad sed unde pariatur neque maxime ullam vitae vero? Et.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur nostrum perferendis autem esse reprehenderit eligendi necessitatibus sunt accusamus dolores, repellat id, fuga neque quas, corporis dolorem consequuntur! Exercitationem, aliquam perspiciatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, ea nostrum! Ipsum, itaque voluptatibus officia nihil amet similique tenetur doloremque ad sed unde pariatur neque maxime ullam vitae vero? Et.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur nostrum perferendis autem esse reprehenderit eligendi necessitatibus sunt accusamus dolores, repellat id, fuga neque quas, corporis dolorem consequuntur! Exercitationem, aliquam perspiciatis.

Setup #

classes less/formir/setup/classes.less #

      
        @tabs: tabs;
@tab: tab;
@tab-navs: tab-navs;
@tab-pages: tab-pages;
@tab-navs: tab-navs;
@tab-labels: tab-labels;
@tab-addons: tab-addons;
      
    

core less/formir/setup/core.less #

      
        @tabs-pages: 10;
      
    

variables less/formir/setup/variables.less #

      
        @tab-nav-active-background: @color-primary;
@tab-nav-active-color: #fff;
@tab-nav-active-border: 1px solid darken(@color-primary, 10%);
@tab-nav-active-shadow: none;
      
    

mixins less/formir/setup/mixins.less #

      
        .tab-nav-active() {
}