1. Web Design
  2. UX/UI
  3. UI Design

What the Heck’s the Bento Box Website Trend All About?

And no it's not just for food websites... Feast your eyes on our favorite bento box website templates 🍱

Japanese food fans will be familiar with the term bento box. For those less au fait with it, bento refers to a meal (usually rice, meat or fish, and pickled veggies) divided into parts and packed into a box. Sure, it sounds tasty, but what the heck has it got to do with web design? Tuck yourself in, let me explain... 

What Is the Bento Box Web Design Trend?

Bento box web design ultimately takes inspiration from the food world, using small, rectangular layouts to highlight key pieces of information. Generous rounded corners are also a requirement for emulating the bento box look. The simplicity of the design means it can work brilliantly on mobile devices, and is a good strategy for breaking up stats and numbers or otherwise dense information. 

And where did the bento website trend come from? Some say it began with the metro design language used by Windows 8 back in 2012, others give Apple the credit as they use bento UI throughout their video presentations and website. Whichever came first, the appetite for bento box design is going nowhere.

Bento Box Website Theme Examples To Try Out

Sold on the bento box concept? If so, before we discuss the benefits of bento box layouts, feast your eyes on these brilliant bento box templates on ThemeForest

What are the Benefits of Bento Box Website Design?

  • Structure: It can be easy to organize content in a visually-appealing way.
  • Modern: It's a trend picking up traction right now so using bento box web design will help position you as a forward-looking company. 
  • Familiar: With many users used to the bento box UI thanks to companies including Apple and Microsoft, many people know how to interact with this design system. 
  • Navigation: This familiarity helps with navigation, it's easy for users to find what they're looking for quickly and easily. 
  • Versatile: Within this type of layout, content can be structured successfully for different devices including mobile, tablet, and desktop.  

Bento Box Website Examples


One of the most famous bento box website designs out there, Apple's store breaks up key content into bitesize chunks. From special offers to latest news, the user can find the information that's relevant to them quickly and easily.

apple dot com website using bento layoutsapple dot com website using bento layoutsapple dot com website using bento layouts


Experimenting with elements of the bento box website style throughout their website, rectangular boxes break up information about features.

the github bento web designthe github bento web designthe github bento web design


Check out the solid bento box design style used throughout Iconwerk’s homepage. Boxes incorporate a mix of graphics and photos, helping to demonstrate their portfolio quickly and easily. 

Iconwerk's bento designIconwerk's bento designIconwerk's bento design

How to Incorporate Bento Box Design Into Your Website

One super simple way to follow the bento website trend is to find modern templates that you can customize with your own content. Search ThemeForest for the relevant templates to your industry or niche and find modern demos that use the bento box style.

Once you've picked your favorite, just download it and you can easily edit it with the content that tells your story. Some sites use entirely bento box style, others prefer to use bento elements in certain sections of the UI. Ultimately, how far you take it is up to you. 

Over to You!

What do you think of the bento box design trend? If it's up your street, we hope you've been inspired by the bento box website examples and the templates you could use for your new site. You can check out ThemeForest for more examples too. If not, check out the other top web design trends that may float your boat. 

Learn More About Bento in Web Design