Tabsv1

Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.

Using Core Components

Adobe Help Center

Examples

Standard

Tabs with three tab panels with each tab panel being a layout container.

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:lastModifiedBy: admin
  4. jcr:created:
  5. jcr:lastModified:
  6. sling:resourceType: core-components-examples/components/tabs
    
        

    

Sample Content

Tabs with three tab panels with each tab panel being a layout container and containing sample content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Lava flowing into the ocean

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Snowy mountain glacier

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

Aerial photo of mountain range
  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:lastModifiedBy: admin
  4. jcr:created:
  5. jcr:lastModified:
  6. sling:resourceType: core-components-examples/components/tabs
    
        

    

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Lava flowing into the ocean

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Snowy mountain glacier

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

Aerial photo of mountain range

Default Active Item

Tabs with three tab panels with the default active item being the third tab.

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:lastModifiedBy: admin
  4. jcr:created:
  5. jcr:lastModified:
  6. sling:resourceType: core-components-examples/components/tabs
  7. activeItem: item_1544184936449
    
        

    

Nested

Nested tabs structure with each tab panel containing a tabs component in its layout container.

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:lastModifiedBy: admin
  4. jcr:created:
  5. jcr:lastModified:
  6. sling:resourceType: core-components-examples/components/tabs