Showing results for 
Search instead for 
Did you mean: 
Community Member

How to create a circular menu?

Guys, I'm trying to create a circular menu similar to the one below in Canvas, but the limitations of HTML are not allowing me. Has anyone tried to do something like this?


36 Replies
Community Coach
Community Coach

Is this sort of thing any help?

Customise your home page 

I'm most impressed by what has come up with.

This is too much fun...

Seriously though, no more time for this today, and it's lunch time.


Current progress Circular Nav Canvas + 


If using the Canvas RCE and having this in a Canvas page is your goal, this likely cannot be accomplished without making use of your Canvas instance's CSS override file and quite possibly your JS override file. There are lots of online examples

Here's one that does a little slide-out when the center circle when clicked expands into other options: 

You'd have to strip out the transitions if you want it to be a static circular menu.

Adventurer II

So I found a solution but it oddly used checkbox input, and that gets stripped out of Canvas.

Then I found this one Items on circle,

and adapted it Circular Nav Canvas 

First Draft.

I uploaded the CSS to Canvas Themes and it worked... I had to add some empty paragraphs above the list to give it space to show up. It can all be copied inline in the RCE, shown here. You can create variable number of links, keeping track of degree rotation. The inner circle will take some more time. I'm running out of time for this at the moment, but might try a bit later. You'll have better performance with CSS file, because you can add :hover selectors on the links.

No JavaScript.


Community Team
Community Team‌, we've moved your question out of Cold Storage (which is where archived ideas are retained but largely hidden from view) to the Instructional Designers‌ group to attract the attention of people who are most familiar with this kind of challenge.