# Teleports The `` is a special kind of element that allows you to add event handlers and content to a different element. ## The Global Tag You can use the special `` tag within your elements for two main purposes: #### 1. Global Event Handlers If your element needs to attach a global event handler, do it on the `` tag. This is useful for things like keyboard shortcuts, or listening for mouse events that happen outside of the element. Event listeners on the `` tag will be removed when the element is unmounted. There is an event modifier called `outside` that can be used in conjunction with mouse events on the global tag. This will limit the event to firing when it happens outside of the element. It's demonstrated below. ```imba import 'util/styles' tag my-menu css .menu-container shadow:0 0 0 1px black/10, lg rd:5px mt:5px o:0 ml:10px of:hidden tween:all 300ms ease .menu-item p:5px 10px bdb:1px solid cooler2 @last:none bgc:white @hover: blue5 c:gray8 @hover:white cursor:pointer showMenu = false