About
The Tabs block creates a horizontal menu of tabs that users can navigate between to view different content. This can be useful if you have multiple pieces of content that you want to launch together and want it to be easy for users to navigate between them.
Adding a Tab Block
To add a Tab, click on the Block Inserter (+). Alternatively, you can type /Tab
in a new paragraph and press enter
.
Get detailed instructions on adding blocks.
Note: You can not add a Tab block inside a Section block.
Add new Tabs by clicking the Plus icon in the Tab List. Remove a Tab by clicking the Minus button in the Tab list.
Tab Block Demonstration
Grey
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus finibus venenatis. Nam et faucibus velit, ac pulvinar arcu. Integer elit mi, lobortis sed urna tristique, gravida elementum ante. Praesent et rhoncus neque. Etiam neque ipsum, facilisis quis dignissim sed, auctor eu nulla. Suspendisse gravida est nec tortor pharetra, eget commodo ipsum ullamcorper. Aliquam id mattis neque. Aenean volutpat nunc risus, sed dignissim sem pharetra ac. Proin sed erat at leo sollicitudin pharetra. Suspendisse lacinia nulla sapien, a iaculis dui faucibus a. Etiam ac pretium enim. Cras nec interdum nulla. Sed nec ornare urna. Donec ultricies elit commodo fringilla suscipit.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus finibus venenatis. Nam et faucibus Proin eleifend dolor erat. Donec bibendum nisl eu maximus blandit. Sed volutpat ac erat ut gravida. Praesent aliquam sapien dapibus sapien fringilla egestas. Vivamus tempus quam id leo pellentesque maximus. Nunc ultrices nisl eget enim tincidunt condimentum. Etiam non massa eget nunc sollicitudin aliquam et vel arcu. Praesent ac pharetra orci. Quisque posuere convallis est, in convallis orci maximus nec. Ut nisl eros, lacinia sed ante et, lobortis blandit ante. Donec bibendum, purus sit amet mattis pretium, nunc lorem egestas est, ac tincidunt augue metus et mi. Integer et metus justo. Nullam porttitor tellus at pellentesque euismod. Integer sit amet nibh tincidunt, bibendum diam nec, bibendum sapien.
Tab 3
Phasellus sagittis diam et urna hendrerit, non ornare dui convallis. Fusce vel purus enim. Vestibulum fermentum sagittis eros ac venenatis. Sed nisl dolor, lacinia ac cursus id, commodo vitae sem. Pellentesque posuere, sapien et placerat placerat, leo lectus lobortis augue, vitae placerat ante nisl sed augue. In finibus purus vel scelerisque condimentum. Aliquam pellentesque ac mi sed vehicula. Nunc aliquam elit eget eros gravida, consequat rutrum tellus semper.
Light
Tab A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus finibus venenatis. Nam et faucibus velit, ac pulvinar arcu. Integer elit mi, lobortis sed urna tristique, gravida elementum ante. Praesent et rhoncus neque. Etiam neque ipsum, facilisis quis dignissim sed, auctor eu nulla. Suspendisse gravida est nec tortor pharetra, eget commodo ipsum ullamcorper. Aliquam id mattis neque. Aenean volutpat nunc risus, sed dignissim sem pharetra ac. Proin sed erat at leo sollicitudin pharetra. Suspendisse lacinia nulla sapien, a iaculis dui faucibus a. Etiam ac pretium enim. Cras nec interdum nulla. Sed nec ornare urna. Donec ultricies elit commodo fringilla suscipit.
Tab B Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus finibus venenatis. Nam et faucibus Proin eleifend dolor erat. Donec bibendum nisl eu maximus blandit. Sed volutpat ac erat ut gravida. Praesent aliquam sapien dapibus sapien fringilla egestas. Vivamus tempus quam id leo pellentesque maximus. Nunc ultrices nisl eget enim tincidunt condimentum. Etiam non massa eget nunc sollicitudin aliquam et vel arcu. Praesent ac pharetra orci. Quisque posuere convallis est, in convallis orci maximus nec. Ut nisl eros, lacinia sed ante et, lobortis blandit ante. Donec bibendum, purus sit amet mattis pretium, nunc lorem egestas est, ac tincidunt augue metus et mi. Integer et metus justo. Nullam porttitor tellus at pellentesque euismod. Integer sit amet nibh tincidunt, bibendum diam nec, bibendum sapien.
Tab C Phasellus sagittis diam et urna hendrerit, non ornare dui convallis. Fusce vel purus enim. Vestibulum fermentum sagittis eros ac venenatis. Sed nisl dolor, lacinia ac cursus id, commodo vitae sem. Pellentesque posuere, sapien et placerat placerat, leo lectus lobortis augue, vitae placerat ante nisl sed augue. In finibus purus vel scelerisque condimentum. Aliquam pellentesque ac mi sed vehicula. Nunc aliquam elit eget eros gravida, consequat rutrum tellus semper.