Side Rail Menu in Blogger: Icons, Coming Soon Links and Dropdown Sub-menus

The slim icon bar on the left of every page is the Areeb side rail. Each icon is a link you control from Layout: pick the name, the URL and the icon, mark a link as "coming soon", and group extra links under an icon so they open in a small dropdown card. No code needed, everything lives in one link list.

What the side rail does

Screen	How it looks	How sub-links open
Desktop and tablet	A column of round icons on the left, centred on the screen	Hover the icon (or focus it with Tab) and a card slides out next to it
Phones	A small pill at the bottom right; tap … to show the icons	Tap the icon and the card opens above the pill, across the screen

Icons without sub-links work as before: a click opens the link and hovering shows its name in a small tooltip.

Where to edit it

1. Open LayoutIn Blogger, go to Layout.
2. Find the sectionLook for Side Rail — Navigation Links and click the pencil on the Rail Navigation gadget.
3. Edit the listEvery row is one link: a Site name (the text) and a Site URL. Add, delete or drag rows, then click Save.

The gadget is locked so it can't be deleted by mistake. You can still edit every link in it.

The name decides everything

The theme reads the Site name of each link to decide what to draw. Here is the full pattern:

Label | icon

• Label is the name shown in the tooltip, the card title and to screen readers.
• | icon is optional. Leave it out and the link gets the default blog icon.

Choose an icon

After the | you can write one of two things.

1. A theme icon by its name. These are built in:

Write	Icon
ui.blog	Page with lines (default)
ui.blogFill	Filled page
ui.bookmark	Bookmark
ui.savedTab	Saved tab
ui.panel	Panel
solar.fire	Fire (trending)
solar.chat	Chat bubble
tabler.info	Info circle

Trending | solar.fire

2. Your own SVG. Paste the whole <svg>…</svg> code after the |. Icons from sites like Tabler, Lucide or Solar work well; copy the SVG code, not the file.

Store | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 9l2-5h12l2 5M4 9h16v11H4z"/><path d="M10 20v-5h4v5"/></svg>

Pasted SVG is cleaned for safety: scripts and event handlers are removed. Use stroke="currentColor" or fill="currentColor" so the icon follows light and dark mode.

Two short names also pick an icon on their own: a link named home gets the filled page, and saved gets the saved tab.

Special links

You want	Site URL	Result
A "coming soon" icon	#soon	The icon is faded and can't be clicked. Great for a section you're still building.
A normal page	Any URL, like /p/about.html	A normal link. On that page itself the icon shows as the current page and isn't clickable.

Add sub-links (the dropdown card)

Any link can hold a small menu. Put the extra links right under it in the list, and start each of their names with a dash and a space: - .

Posts | ui.blog              → /search
- Guides                     → /search/label/Guide
- Components                 → /search/label/Component
- Features                   → /search/label/Features
Store                        → /p/store.html
- Themes                     → /p/themes.html
- Widgets                    → /p/widgets.html

What you get:

• Posts and Store stay as icons in the rail. The links that start with - don't get icons; they go into the card of the icon above them.
• The card title is the parent's label. Next to it, All → links to the parent's own URL, so that page stays one click away.
• An icon with sub-links opens the card instead of a page, and its tooltip is replaced by the card.
• An icon with no - links under it keeps working as a plain link.

Blogger adds new links at the bottom of the list. After adding a sub-link, drag it up so it sits directly under its parent. The order in the list is the order in the card.

A "coming soon" parent (#soon) can still have sub-links. Its card simply has no All → link. Handy to show what's ready inside a section that isn't finished.

Badges and counts

End a sub-link name with text in square brackets to add a small tag on the right:

Site name	Shows
- Tools [new]	Tools, with a small new pill
- Bundles [sale]	Bundles, with a sale pill
- Guides [12]	Guides, with a plain grey 12 (numbers get no pill)

Counts are typed by hand and don't update themselves. Change the number when you add posts, or leave it out.

A full example

Paste these rows into Rail Navigation one by one (name on the left, URL on the right):

Site name	Site URL
Posts | ui.blog	/search
- Guides [12]	/search/label/Guide
- Components [18]	/search/label/Component
- Features [new]	/search/label/Features
Trending | solar.fire	/p/terms.html
Tools	#soon
- Img Tool	/p/image-compressor.html
- Code generator	/p/image-code-generator.html

Result: three icons in the rail. Posts opens a card with three topics, Trending is a plain link, and Tools is faded "coming soon" but its card already lists the two tools.

Using it with a mouse, keyboard and touch

• Mouse: hover the icon. The card stays open while you move onto it and closes a moment after you leave.
• Keyboard: press Tab to reach the icon and the card opens; Tab again moves through its links. Enter toggles it and Esc closes it.
• Touch: tap the icon to open the card, tap another icon to switch, tap anywhere else to close.

Tips

• Keep the rail short: 3 to 5 icons read best. Put the rest in cards.
• Keep sub-link names short (one or two words). Long names make the card wide.
• Label links (/search/label/Name) are the easiest sub-links: they list every post in that label.
• Label names are case-sensitive in URLs: /search/label/Guide and /search/label/guide are different pages.

Quick reference

You want	Write in Site name / Site URL
A normal icon link	Label → any URL
Pick a built-in icon	Label | solar.fire
Use your own icon	Label | <svg…>…</svg>
Coming soon icon	URL #soon
A sub-link	- Name, directly under its parent
A badge	- Name [new]
A count	- Name [12]
Remove a card	Delete the - links under the icon

Questions