14 January: A big upgrade for docs site TOCs, plus better tables and emojis

We’ve added more customization options for the table of contents, plus a new alignment setting for tables and an emoji update in the GitBook app

✨ New and noteworthy

Big upgrades for your docs site’s table of contents

Today we’ve released a number of new customization options and improvements to TOCs in published documentation. Here’s what’s new:

• Background styles – You can now select the new Filled table of contents style to visually separate your navigation from your content. It will automatically adapt to your site’s background color for both light and dark mode. The default style remains the same for all sites.

• List styles – Change the style of list items in both the TOC and the On this page section on the right. Use Pill for a cleaner look, or Line to appear more technical. The default style remains the same for all sites, but as the On this page section now uses the same style, it might look slightly different from what you’re used to.

• Vertical site sections – If you have disabled the header on your site but you’ve created multiple site sections, those sections will now be displayed as a vertical list at the top of the table of contents. When there are more than five sections, the list will scroll. The horizontal tabs remain the default for all sites with a header, although vertical sections will be an option for all sites in the future.

• Moved variant dropdown – With all the changes above, the variant dropdown felt more at home at the top of the table of contents. We made sure that its behaviour is as close to the current behaviour — it remains sticky at the top of the TOC, so is always available. If you have variants on your site, you should see the variant selector in its new position already.

A quick look at how our new TOC styles display, using our own documentation site as a demo.

Vertical alignment in tables

You could already set the horizontal alignment of cells in table blocks — and now you can also set vertical alignment per column. Hover over the column header and open the Options menu , then choose Vertical alignment and the alignment you want.

In this table, different columns have bottom, middle and top alignments to demonstrate the options available.

In-app emoji update

We’ve now updated our emoji within the GitBook app to display as Apple Emoji on Apple devices, and Google’s Noto Color Emoji for non-Apple devices.

This follows last week’s update to change the same emoji for published content to make them more accessible across all browsers.

Improved

• Social preview images now support the font you selected in the Customization menu. So your preview images will now appear in the correct font when you post your docs on social platforms or share in places like Slack.

• We're actively working to improve performance and have fixed some things that were slowing page loads and causing load errors for published documentation. This work is ongoing, but we've already seen some big improvements.

Fixed

• Fixed an issue the prevented users from changing the favicon and logo of existing docs site variants.

• Fixed an issue that caused some site redirects to result in a ‘Page not found’ error.

• Fixed an error that could occur when changing or removing the title of your site via the Customization menu, and removed the entire function from that space — it’s now in the Settings > Structure menu.

---

We’re constantly working on improving the way you and your team work in GitBook, and value your input on features, bugs, and more. Make sure you head to our official GitBook community to join the discussion.